小程序地址列表左滑删除按钮

1、wxml

<view class="list-box">
      <view 
        wx:for="{{ addressData }}" wx:key="index"
        bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove" bindtouchend="bindtouchend" 
        animation="{{ item.animation }}" data-index="{{ index }}"
        class="list-child fcjs">
        <view class="item-left flex">
          <view class="fc">
            <text class="f-24 f-333">某某某</text>
            <text class="f-9b9">13544251254</text>
            <text class="f-ff7 tc">默认</text>
          </view>
          <view class="to2 f-9b9">广东省广州市天河区某某街道某某路某某街888号 广东省广州市天河区某某街道某某路某某街888号广东省广州市天河区某某街道某某路某某街888号</view>
        </view>
        <view class="item-right f-9b9">
          <text>编辑</text>
          <text class="bg-ff7 f-fff">删除</text>
        </view>
      </view>
</view>

2、js

// 全局变量
let touchDotX = 0; // X按下时坐标
let touchDotY = 0; // y按下时坐标
// let interval; // 计时器
// let time = 0; // 从按下到松开共多少时间*100

data: {
    addressData: [
        {id: 1, animation: '', animationBool: false}, 
        {id: 2, animation: '', animationBool: false}, 
        {id: 3, animation: '', animationBool: false}
    ] // 假数据
},
bindtouchstart (e) {
    // console.log('bindtouchstart')
    touchDotX = e.touches[0].pageX; // 获取触摸时的原点
    touchDotY = e.touches[0].pageY;
    // console.log(touchDotX, touchDotY)
    // 使用js计时器记录时间
    // interval = setInterval(function() {
    //   time ++;
    // }, 100)
  },

  bindtouchmove (e) {
    var idx = e.currentTarget.dataset.index;
    var touchMoveX = e.touches[0].pageX;
    if (touchMoveX - touchDotX < -40) {
      this.moveAnimation('left', idx)
    } else if (touchMoveX - touchDotX >= 40) {
      this.moveAnimation('right', idx)
    }
  },

  bindtouchend (e) {
    // console.log('bindtouchend')
    // clearInterval(interval); // 清除setInterval
    // time = 0; 
  },

  moveAnimation (str, idx) {
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
      delay: 100
    });
    // 判断是否已左滑，是（复位）
    for (var i in this.data.addressData) {
      if (this.data.addressData[i].animationBool) {
        animation.translate(0, 0).step()
        this.data.addressData[i].animation = animation.export();
        this.data.addressData[i].animationBool = false;
      }
    }
    
    if (str === 'left') {
      animation.translate(-50, 0).step()
    } else {
      animation.translate(0, 0).step()
    }
    this.data.addressData.forEach((item, index) => {
      if (idx == index) {
        item.animation = animation.export();
        if (str === 'left') {
          item.animationBool = true;
        }
      } else {
        item.animationBool = false;
      }
    })

    this.setData({
      addressData: this.data.addressData
    })
  },

3、wxss

.list-box {
  overflow: hidden;
}
.list-box .list-child {
  width: calc(100% + 100rpx);
  border-bottom: 1rpx solid #eee;
}
.list-box view.list-child:first-child {
  border-top: 1rpx solid #eee;
}
.list-box .item-left {
  padding-left: 48rpx;
  padding-right: 24rpx;
}
.list-box .item-left view:first-child {
  margin-bottom: 20rpx;
}
.list-box .item-left view text:nth-child(2) {
  margin: 0 30rpx;
}
.list-box .item-left view text:nth-child(3) {
  display: inline-block;
  width: 55rpx;
  height: 24rpx;
  line-height: 24rpx;
  background-color: rgba(255, 127, 0, .1);
}
.list-box .item-right text {
  position: relative;
  display: inline-block;
  flex: 0 0 100rpx;
  width: 100rpx;
  height: 60rpx;
  line-height: 60rpx;
  padding: 46rpx 0;
  text-align: center;
}
.list-box .item-right text:first-child:after {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  content: '';
  width: 1rpx;
  height: 60rpx;
  border-left: 1rpx solid #eee;
}

4、app.wxss

/**app.wxss**/
page {
  background-color: #fff;
}
/* 背景颜色 */
.bg-ebe {
  background-color: #ebebeb;
}
.bg-f7f {
  background-color: #f7f7f7;
}
.bg-fff {
  background-color: #fff;
}
.bg-ff7 {
  background-color: #FF7F00;
}
.f-333 {
  color: #333;
}
.f-fff {
  color: #fff;
}
.f-ff7 {
  color: #FF7F00;
}
.f-9b9 {
  color: #9b9b9b;
}
.f-18 {
  font-size: 18rpx;
}
.f-24 {
  font-size: 24rpx;
}
.f-26 {
  font-size: 26rpx;
}
.f-28 {
  font-size: 28rpx;
}
.f-30 {
  font-size: 30rpx;
}
.f-36 {
  font-size: 36rpx;
}
.fw {
  font-weight: bold;
}
.wh {
  width: 100%;
  height: 100%;
}
.clearfix {
  overflow: hidden;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.fc {
  display: flex;
  align-items: center;
}
.fs {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.fcjs {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fcjc {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex {
  flex: 1;
}
.po {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.tc {
  text-align: center;
}
.auto-img {
  display: block;
  width: 100%;
  height: auto;
}
.auto-img image {
  display: block;
  width: 100%;
  height: auto;
}
.auto-bg {
  background-size: cover;
  background-repeat: no-repeat;
}
.to {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.to1 {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.to2 {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.br {
  border-radius: 20rpx;
  overflow: hidden;
}
.btn-none {
  border: none;
}
.btn-none::after {
  border: none;
}
.btn-none::before {
  border: none;
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}