小程序实现左滑删除功能

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/GreyBearChao/article/details/84305633

小程序中实现左滑删除

效果预览：

// wxml
<view class="delete_list">
  <view class="list" wx:for="{{listData}}" wx:key="{{index}}}" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend" data-index="{{index}}">
    <view class="content" style="{{activeIndex===index?list_style:''}}">{{item}}</view>
    <view class="delete" bindtap="delete" style="{{activeIndex===index?list_style:''}}">删除</view>
  </view>
</view>

// wxss
page {
  height: 100%;
  background-color: #f1f1f1;
}
.delete_list {
  padding: 0 0 0 30rpx;
  margin: 30rpx 30rpx 0;
  background-color: #fff;
}
.delete_list>.list {
  height: 120rpx;
  line-height: 120rpx;
  display: flex;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.3); /*模拟一像素边框*/
}
.delete_list>.list>.content {
  flex: 1;
  transform: translateX(240rpx);
  margin-left: -240rpx;
  /*background-color: #fff;*/
  transition: all 0.2s ease-in-out;
}
.delete_list>.list>.delete {
  width: 240rpx;
  text-align: center;  
  color: #fff;
  background-color: #E64340;
  transform: translateX(240rpx);
  transition: all 0.2s ease-in-out;
}

// js
const app = getApp()
Page({
  data:{
    listData: [
      '我是内容一', 
      '我是内容二', 
      '我是内容三', 
      '我是内容四', 
      '我是内容五', 
      '我是内容六', 
      '我是内容七', 
      '我是内容八'
    ],
    activeIndex: -1,
    list_style: '',
    startX: 0,
    rate: 2
  },
  onLoad () {
    let rate = 750 / wx.getSystemInfoSync().screenWidth
    this.setData({
      rate: rate
    })
  },
  touchstart: function (e) {
    let startX = e.touches[0].clientX
    this.setData({
      startX: startX
    })
  },
  touchmove: function(e) {
    let moveX = e.touches[0].clientX
    let dis = (this.data.startX - moveX) * this.data.rate // 换算成rpx
    let activeIndex = e.currentTarget.dataset.index
    let left = 240
    if (dis <= 0) {
      left = 240
    } else if (dis >= 240) {
      left = 0
    } else {
      left = 240 - dis
    }
    this.setData({
      list_style: 'transform:translateX(' + left + 'rpx)',
      activeIndex: activeIndex
    })
  },
  touchend: function (e) {
    let endX = e.changedTouches[0].clientX
    let dis = (this.data.startX - endX) * this.data.rate
    let activeIndex = e.currentTarget.dataset.index
    let left = 0
    if (dis >= 200) {
      left = 0
    } else {
      left = 240
    }
    this.setData({
      activeIndex: activeIndex,
      list_style: 'transform:translateX(' + left + 'rpx)'
    })
  },
  delete: function () {
    this.data.listData.splice(this.data.activeIndex, 1)
    this.setData({
      listData: this.data.listData
    })
  }
})

备注：目前1像素边框问题通过box-shadow解决，本人无法通过定位结合缩放（transform: scale(0.5)）解决1像素边框问题。