小程序左滑显示删除功能

思路

1. 采用分层思想，每个item分为上下两层，上面一层放内容，下面一层放删除按钮

2. 上面一层采用绝对定位，下面一层放到需要显示的位置，通过动态设置right属性的值，来实现向左滑动漏出下面的删除按钮

3. 通过touchstart，touchmove 这几个事件来判断滑动的方向

4. 通过item的index值确定滑动的是哪一项，设置滑动项的right值

在需要滑动的item上注册事件

<view class='address-list' data-index="{{index}}" bindtouchstart='touchStart' bindtouchmove='touchMove'>

  <!-- 删除按钮 -->
    <view class='del'><image src='{{AppImg.address_del}}'></image></view>
    <!-- 内容 -->
    <view class='adsInfo' style="right:{{item.right}}">
      <view class='icontrue'><image src='{{AppImg.address_right}}'></image></view>
      <view class='info'>
        <view class='info-name'>涂山苏苏</view>
        <view class='info-address'>海市上海市浦东新海市上海市浦东新海市上海市浦东新</view>
      </view>
      <view class='iconmsg'><image src='{{AppImg.address_change}}'></image></view>
    </view>

</view>

js

data:{
    movedel:{
      clientStart:'',//滑动开始的位置
      clientMove:'',//滑动的位置
    },
    addressList:[
      {id:1,right:''},
      { id: 2, right: '' }
    ]
}


// 开始滑动
  touchStart(e){
    let start = "movedel.clientStart"
    this.setData({
      [start]: e.touches[0].clientX
    })
  },
  // 滑动
  touchStart(e){
    let start = "movedel.clientStart"
    this.setData({
      [start]: e.touches[0].clientX
    })
  },
  // 滑动
  touchMove(e){
    let move = 'movedel.clientMove'
    this.setData({
      [move]: e.touches[0].clientX
    })
    let distance = this.data.movedel.clientStart - this.data.movedel.clientMove
    //确定滑动的是哪一项
    let index = e.currentTarget.dataset.index
    
    let list = this.data.addressList

    if(distance<=0){
      list[index].right = '0';
      this.setData({
        addressList:list
      })
    }
    if(distance>=80){
      list[index].right = '80rpx';
      this.setData({
        addressList: list
      })
    }
  },