*小程序如何实现左滑删除效果*

左滑删除这个效果在很多移动端APP上都有体现，很多用户也都养成了这样的习惯，在开发小程序过程中，自己动手，实现这个左滑删除的效果了。

实现效果

1.列表中侧滑删除
2.删除按钮不同时存在

分析

1.需要一个左边正常内容块，然后右边删除块使用定位移到最右侧隐藏，删除按钮通过status来操纵 left 属性的值来实现像左移动。
2.当手指触摸的时候，获取到起始坐标，通过bindtouchstart这个事件我们可以获得用户刚点击（手指还未抬起）时的坐标。
3.滑动时，获取到最后停留的坐标，通过bindtouchmove我们可以一直获取当前的坐标（用户手指一直在屏幕上滑动时）。因此，我们只需要得到x轴上的移动的前后坐标相减是正数，就是向左移动。
4.当有一个删除显示时，其他删除不显示，可以通过遍历改变status值

1.wxml代码块

    <view class="box" wx:for="{{arr}}" wx:key="index">
      <view class="item {{item.status ? '' :'active'}}">
        <view class="content"  data-index="{{index}}" bindtouchstart="touchS" bindtouchmove="touchM">
          <view class="name">
            {{item.name}}
          </view>
          <view>
             {{item.content}}
          </view>
        </view>
        <view class="del-button" data-index="{{index}}" bindtap="del">删除</view>
      </view>
    </view>

2.wxss代码块

 .box{
 height: 100%;
 border-bottom: 2rpx solid #d9d9d9;
}
.item{
 position:relative;
 top: 0;
 width: 100%;
 height: 150rpx;
 padding: 0;
}
.item .content{
 margin-left: 20rpx;
 background-color: #ffffff;
 height: 100%;
 position: relative;
 display: flex;
 flex-flow: column;
 justify-content: center;
 left: 0;
 width: 100%;
 transition: all 0.3s;
}
.item .name{
 margin-bottom: 15rpx;
}
.item .del-button {
 position: absolute;
 right: -138rpx;
 width: 140rpx;
 height: 100%;
 background-color: #df3448;
 color: #fff;
 top: 0;
 text-align: center;
 display: flex;
 justify-content: center;
 align-items: center;
 transition: all 0.3s;
 font-size: 24rpx;
}
.item.active .content{
  left: -140rpx; 
}
.item.active .del-button{
 right: 0;
}

3.JS控制

data

arr: [
      {
        name:'name',
        content:'content',
        status: true
      },
      {
        name: 'name',
        content: 'content',
        status: true
      }
 ]

touch事件

touchM(e) {
    // 获得当前坐标
    this.currentX = e.touches[0].clientX;
    this.currentY = e.touches[0].clientY;
    //刚点击的坐标 - 最后停止的坐标 > 0 说明左滑
    const x = this.startX - this.currentX; //横向移动距离
    if (x > 10) {
      //向左滑是显示删除
      this.setData({
        //只让你当前滑动的这个元素的状态改变
        [`arr[${e.currentTarget.dataset.index}].status`]: false
      })
    } else if (x < -10) {
      //向右滑
      this.setData({
        [`arr[${e.currentTarget.dataset.index}].status`]: true
      })
    }

  },
  touchS(e) {
    // 获取手指点击的（X,Y）坐标
    // 获得起始坐标
    this.startX = e.touches[0].clientX;
    this.startY = e.touches[0].clientY;
    this.data.arr.forEach((item, index) => {
      if (index !== e.currentTarget.dataset.index) {
        item.status = true
        //遍历改变status值,让非当前点击下标的元素，不显示删除
      }
    })
    this.setData({
      //重新赋值，渲染到页面
      arr: this.data.arr
    })
  },

删除事件

del(val){
    let that = this
    let index = val.currentTarget.dataset.index
    wx.showModal({
      title: '提示',
      content: '确认删除吗',
      success(res) {
        if (res.confirm) {
          console.log('用户点击确定')
          let arr= that.data.arr
          arr.splice(index, 1)
          that.setData({
            arr: arr
          })
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  },

效果

效果图

最后编辑于：2020.08.20 11:02:47