小程序左滑显示删除功能

思路

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

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

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

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

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

  
    
    
    
      
      
        涂山苏苏
        海市上海市浦东新海市上海市浦东新海市上海市浦东新
      
      
    

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
      })
    }
  },