使用微信小程序的movable-view组件。movable-view。
使用position: absolute;,将可滑动部分(z-index值较大)放置在删除按钮(z-index值较小)之上,最开始是遮住删除按钮的。
使用touchstart、touchend属性绑定方法,控制删除按钮的显示隐藏。

WXML:

点击(此处)折叠或打开

  1. <view class='box'>
  2.   <block wx:for="{{delList}}" wx:key="this">
  3.   <view class='box_item'>
  4.     <view class='movebox'>
  5.       <movable-area>
  6.         <movable-view direction="horizontal" x="{{curr==item.id?x:''}}" data-id="{{item.id}}" bindtouchstart='touchStart' bindtouchend='touchEnd' out-of-bounds="{{true}}" friction="150">
  7.           {{item.text}}
  8.         </movable-view>
  9.       </movable-area>
  10.       <view class='delbox' data-delID="{{item.id}}" catchtap='del'>
  11.         删除
  12.       </view>
  13.     </view>
  14.   </view>
  15. </block>
  16. </view>

在使用movable-view中用到的属性:
direction="horizontal",设置movable-view为横向移动。
out-of-bounds="{{true}}",设置超过区域之后,movable-view是否还可以移动,这个属性默认值为false,如果不添加这个属性,就不会有回弹效果。
friction="150"设置摩擦系数,摩擦系数越大,滑动越快停止。
x="{{x}}"设置x轴方向的偏移。
tip: movable-view 必须设置width和height属性,不设置默认为10px。
tip: movable-view 默认为绝对定位,top和left属性为0px

wxss

点击(此处)折叠或打开

  1. .box_item{
  2.   margin-top: 20rpx;
  3. }
  4. .movebox{
  5.   position: relative;
  6. }
  7. movable-area{
  8.   width: 620rpx;
  9.   height: 100rpx;

  10. }
  11. movable-view{
  12.   border:5px solid red;
  13.   width: 750rpx;
  14.   height: 100rpx;
  15.   background: pink;
  16.   box-sizing: border-box;
  17.   position: absolute;
  18.   z-index: 999999;
  19.   top:0rpx;
  20.   left: 0rpx;
  21.   text-align: left;
  22.   line-height: 80rpx;
  23. }
  24. .delbox{
  25.   width: 100rpx;
  26.   height: 100rpx;
  27.   text-align: center;
  28.   line-height: 100rpx;
  29.   background: greenyellow;
  30.   color: #fff;
  31.   font-size: 30rpx;
  32.   position: absolute;
  33.   top: 0rpx;
  34.   right: 0rpx;
  35.   z-index: 2;
  36. }
js
通过控制movable-view的x属性来控制删除按钮的显示和隐藏。
绑定movable-view的touchstart和touchend事件,记录开始位置,滑动结束位置的 clientX
结束位置- 开始位置>20 说明 向左滑动   设置x:-120  不是则x:0


点击(此处)折叠或打开

  1. // pages/movedel/movedel.js
  2. Page({

  3.   /**
  4.    * 页面的初始数据
  5.    */
  6.   data: {
  7.     x: 0, // 注意,这里通过x属性设置的宽度的单位是px
  8.     delList: [{
  9.         id: 1,
  10.         text: "con1"
  11.       },
  12.       {
  13.         id: 2,
  14.         text: "con2"
  15.       },
  16.       {
  17.         id: 3,
  18.         text: "con3"
  19.       },
  20.       {
  21.         id: 4,
  22.         text: "con4"
  23.       },
  24.       {
  25.         id: 5,
  26.         text: "con5"
  27.       }
  28.     ]
  29.   },
  30.   /**
  31.    * 点击开始
  32.    */
  33.   touchStart: function(e) {
  34.     console.log(e, e.touches[0].clientX)
  35.     this.setData({
  36.       s_x: e.touches[0].clientX,
  37.       curr: e.currentTarget.dataset.id
  38.     })
  39.   },
  40.   /**
  41.    * 移动结束
  42.    */
  43.   touchEnd: function(e) {
  44.     console.log(e, e.changedTouches[0].clientX)
  45.     var e_x = e.changedTouches[0].clientX
  46.     if (this.data.s_x - e_x > 20) {
  47.       console.log("向左滑")
  48.       this.setData({
  49.         x: -120
  50.       })
  51.     } else {
  52.       this.setData({
  53.         x: 0
  54.       })
  55.     }

  56.   },
  57.   /**
  58.    * 删除选中的
  59.    */
  60.   del:function(e){
  61.     var _this = this, id = e.currentTarget.dataset.delID
  62.     this.data.delList.splice(id,1)
  63.     this.setData({
  64.       delList: this.data.delList,
  65.       curr:0
  66.     })
  67.   }
  68. })







小程序滑动删除 movable-area   movable-view-LMLPHP






11-10 04:54