欢迎光临
我的个人博客网站

weui+vue列表滑动删除

由于移动端的屏幕尺寸限制,很多App都的列表项使用了的滑动显示删除按钮,然后点击删除功能。网页端可以采用插件方式很容易实现。

这里采用Vue+Weui+vue2-touch-events插件实现。

我们都知道滑动事件由按下、移动、松开3个步骤组成。要在按下的时候记录手指按下的屏幕位置,并判断是否有已经打开的列表,有的话先关闭;在滑动的过程中,根据当前触摸的坐标计算滑动距离,移动相应的列表,当滑动记录大于完全打开的记录的一半时自动打开列表;当松开时滑动距离小于完全打开的记录的一半时吧列表关闭。效果如下:

weui+vue列表滑动删除

很简单,直接贴代码,

HTML代码:

<div class="weui-panel">     <div class="weui-panel__bd">         <div class="weui-media-box weui-media-box_small-appmsg">                  <div v-for="record in records" class="weui-cells">                     <div class="weui-cell  weui-cell_swiped">                         <div ref="ls" class="weui-cell__bd">                             <div class="weui-cell" v-touch:start="listSwipeStart()" v-touch:moving="listSwipeMoving()" v-touch:end="listSwipeEnd()">                                 <div class="weui-cell__hd">                                     <i class="fas fa-folder color-orange"></i>                                 </div>                                 <div class="weui-cell__bd">                                     {{record}}                                 </div>                                 <div class="weui-cell__ft">                                 </div>                             </div>                         </div>                          <div class="weui-cell__ft">                             <a class="weui-swiped-btn weui-swiped-btn_orange" href="javascript:">修改</a>                             <a class="weui-swiped-btn weui-swiped-btn_warn" href="javascript:">删除</a>                         </div>                     </div>                 </div>                 <div v-if="records == null || records.length==0" class="weui-cells">                     <div class="weui-cell weui-cell_active weui-cell_access weui-cell_example">                         <div class="weui-cell__bd weui-cell_primary" style="text-align:center">                             <p>无数据!</p>                         </div>                     </div>                 </div>         </div>     </div> </div> 

主内容区域是一个weui面板,面板的主体方式weui-cell组件用于显示列表。

由于要显示修改删除按钮,所以嵌套一层weui-cell:外层的weui-cell的bd里嵌套一个weui-cell,里面的weui-cell是列表内容,外层weui-cell的ft里放修改删除按钮,正常时内层的weui-cell遮掉外层的ft,当滑动时移动内层的weui-cell外层的按钮就可显示出来了。

给内层的weui-cell绑定vue2-touch-events插件的3个事件,v-touch:start,v-touch:moving,v-touch:end。

Js代码:

<script>         const Counter = {             el: ".page",             data() {                 return {                     swipe: {                         startX: 0,                         startY:0,                         maxDistance: 136                     }                  }             },             mounted: function () {                 for (var i = 1; i <= 20; i++) {                     this.records.push("n" + i);                 }             },              methods: {                 listSwipeStart() {                     that = this;                     return function (direction, event) {                         if (direction.changedTouches != undefined && direction.changedTouches.length === 1) {                             //清楚已打开的列表                             for (i = 0, len = that.$refs.ls.length; i < len; i++) {                                 if (that.$refs.ls[i].style != "") that.$refs.ls[i].style = "";                             }                             //记录起始位置                             that.swipe.startX = direction.changedTouches[0].pageX;                             that.swipe.startY = direction.changedTouches[0].pageY;                         }                     };                 },                 listSwipeMoving() {                     that = this;                     return function (direction, event) {                         if (direction.changedTouches != undefined && direction.changedTouches.length === 1) {                             var distanceX = direction.changedTouches[0].pageX - that.swipe.startX;                             var distanceY = direction.changedTouches[0].pageY - that.swipe.startY;                             //左滑                             if (distanceX < 0 && Math.abs(distanceX) > Math.abs(distanceY)) {                                 if (Math.abs(distanceX) < (that.swipe.maxDistance / 2)) direction.path[direction.path.length - 14].style = "transform: translateX(" + distanceX + "px)";                                 else direction.path[direction.path.length - 14].style = "transform: translateX(" + -that.swipe.maxDistance + "px)";                             }                         }                     };                 },                 listSwipeEnd() {                     that = this;                     return function (direction, event) {                         if (direction.changedTouches != undefined && direction.changedTouches.length === 1) {                             var distanceX = direction.changedTouches[0].pageX - that.swipe.startX;                             var distanceY = direction.changedTouches[0].pageY - that.swipe.startY;                             //左滑                             if (distanceX < 0 && Math.abs(distanceX) > Math.abs(distanceY)) {                                 if (Math.abs(distanceX) < (that.swipe.maxDistance / 2)) direction.path[direction.path.length - 14].style = "";                                 else direction.path[direction.path.length - 14].style = "transform: translateX(" + -that.swipe.maxDistance + "px)";                             }                         }                     };                 },             }         };         var page = new Vue(Counter);     </script> 
赞(0) 打赏
未经允许不得转载:张拓的天空 » weui+vue列表滑动删除
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏