小程序实现左滑删除功能

柔光的暖阳◎ 2022-04-15 02:48 253阅读 0赞

#### 小程序中实现左滑删除 ####

效果预览：  
![左滑删除图][20181120171151110.gif]

// 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像素边框问题。

[20181120171151110.gif]: /images/20220415/79c08a406470450c90b65aefd9ae8485.png