微信小程序 滑动删除

左滑删除效果在很多移动端APP上都有体现，很多用户也都养成了这样的习惯，但是在开放小程序过程中，我发现小程序本身并没有提供这个功能，所以要自己实现这个效果。

image.png

实现方式

事件->小程序API

image.png
image.png

wxml代码

<!-- 地址列表 -->
<scroll-view class="address-list" scroll-y="{{isScroll}}" style='height:{{windowHeight}}px' wx:if="{{!noData.state}}">
  <block wx:for="{{data}}" wx:key="list">
    <view class="address-item" data-index='{{index}}' bindtouchstart="drawStart" bindtouchmove="drawMove" bindtouchend="drawEnd" style="right:{{item.right}}rpx">
      <view class="address-content">
        <view class="address-info">
          <view>王某某</view>
          <view>15210074979</view>
          <view>
            <navigator hover-class="none" url="/pages/my-address-edit/my-address-edit">
              <image src="/images/address_edit.png"></image>
            </navigator>
          </view>
        </view>
        <view class="address-add">北京市 朝阳区 彩虹佳6号楼1单元1908室</view>
      </view>
      <view class="address-remove" data-index="{{index}}" bindtap="delItem">删除</view>
    </view>
  </block>
</scroll-view>

JS代码

Page({
    delBtnWidth:160,
    data: [{ content: "1", right: 0 }, { content: "2", right: 0 }, { content: "3", right: 0 }, { content: "4", right: 0 }, { content: "5", right: 0 }, { content: "6", right: 0 }, { content: "7", right: 0 }, { content: "8", right: 0 }, { content: "9", right: 0 }, { content: "10",  right: 0 }],
    isScroll:true,
    windowHeight:0,
  },
  onLoad: function (options) {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          windowHeight: res.windowHeight
        });
      }
    });
  },
  drawStart: function (e) {
    var touch = e.touches[0]
    for(var index in this.data.data) {
      var item = this.data.data[index]
      item.right = 0
    }
    this.setData({
      data: this.data.data,
      startX: touch.clientX,
    })

  },
  drawMove: function (e) {
    var touch = e.touches[0]
    var item = this.data.data[e.currentTarget.dataset.index]
    var disX = this.data.startX - touch.clientX
    
    if (disX >= 20) {
      if (disX > this.data.delBtnWidth) {
        disX = this.data.delBtnWidth
      }
      item.right = disX
      this.setData({
        isScroll: false,
        data: this.data.data
      })
    } else {
      item.right = 0
      this.setData({
        isScroll: true,
        data: this.data.data
      })
    }
  },  
  drawEnd: function (e) {
    var item = this.data.data[e.currentTarget.dataset.index]
    if (item.right >= this.data.delBtnWidth/2) {
      item.right = this.data.delBtnWidth
      this.setData({
        isScroll: true,
        data: this.data.data,
      })
    } else {
      item.right = 0
      this.setData({
        isScroll: true,
        data: this.data.data,
      })
    }
  },
  delItem: function (e) {}
})

wxss代码

.address-list {
  margin-top: 20rpx;
}

.address-item {
  background: var(--ColorWhite);
  position: relative;
  display: flex;
  width: 100%;
  margin-bottom: 20rpx;
}

.address-content{
  flex: 1;
  padding: 30rpx 30rpx 32rpx;
}

.address-remove{
  width: 160rpx;
  height: 100%;
  background: var(--ColorRed);
  color: var(--ColorWhite);
  position: absolute;
  top: 0;
  right: -160rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.address-info {
  display: flex;
  align-items: center;
  line-height: 48rpx;
  margin-bottom: 22rpx;
}

.address-info view:nth-child(1) {
  width: auto;
  font-size: var(--fs18);
  font-weight: 600;
  margin-right: 30rpx;
}

.address-info view:nth-child(2) {
  font-size: var(--fs15);
  color: var(--ColorText4);
  flex: 1;
}

.address-info view:nth-child(3) {
  text-align: right;
}

.address-info view:nth-child(3) image{
  width: 34rpx;
  height: 34rpx;
}

.address-add {
  line-height:48rpx;
  font-weight:400;
}

.address-button {
  position: fixed;
  bottom: 80rpx;
  left: 0;
  right: 0;
  width: 86.67%;
  margin: 0 auto;
  text-align: center;
  height: 100rpx;
  line-height: 100rpx;
  border-radius: 50rpx;
  font-weight:600;
  z-index: 1;
  font-size: var(--fs18);
  background: var(--Fill2);
}