微信實作左滑删除

wxml

<view class="delete_list">
    <view wx:for="{{contactList}}" wx:key="{{index}}}" bindtouchstart="touchstart" bindtouchmove="touchmove" class='list-box' bindtouchend="touchend" data-index="{{index}}"  data-info='{{item}}'>
      <view class="list">
        <view class="content" style="{{activeIndex===index?list_style:''}}">{{item.name}}</view>
        <view class="delete" data-info="{{item}}" bindtap="deleteContact" style="{{activeIndex===index?list_style:''}}">删除</view>
      </view>
      <view style='' class='list-border {{index==contactList.length-1?"no-border":""}}'></view>
    </view>
  </view>
           

wxss

/* 滑動删除的樣式 */
.delete_list {
  background-color: #fff;
  padding-left: 32rpx;
  box-sizing: border-box;
}
.delete_list .list {
  height: 120rpx;
  line-height: 120rpx;
  display: flex;
  width: 100%;
  overflow: hidden;
   /* box-shadow: 0 0px 0px 0px #fff; 模拟一像素邊框 */
}
.list-border{
margin-right:32rpx;
border-bottom:2rpx solid #EFF1F4;
}
.no-border{
  border-bottom: 0!important;
}
.delete_list .list>.content {
  flex: 1;
  transform: translateX(240rpx); /* 這個是delete的寬度的設定 */
  margin-left: -240rpx;/* 這個是delete的寬度的設定 */
  transition: all 0.2s ease-in-out;
}
.delete_list .list>.delete {
  width: 240rpx;
  text-align: center;  
  color: #fff;
  background-color: #E64340;
  transform: translateX(240rpx);/* 這個是delete預設将其隐藏*/
  transition: all 0.2s ease-in-out;
}
           

js

data: {
    contactList: [
      { id: 19, memberId: 105256, name: "hh", phone: "15236253253", selected: null },
      { id: 20, memberId: 105256, name: "ff", phone: "18836293253", selected: null },
    ], //資料接收
    activeIndex: -1, //這個限制滑動元素隻能打開一個，打開第二的時候第一個關閉
    list_style: '', //元素左滑的樣式
    startX: 0,
    rate: 2  //轉化rpx的接收屬性
  },
    onLoad: function(options) {
    // 擷取裝置寬度進而進行像素轉換
    let rate = 750 / wx.getSystemInfoSync().screenWidth 
    this.setData({
      rate: rate
    })
  },
  // 觸摸開始
  touchstart: function(e) {
    let startX = e.touches[0].clientX
    console.log(startX)
    this.setData({
      startX: startX
    })
  },
  // 移動
  touchmove: function(e) {
    console.log(e.touches[0].clientX)
    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)'
    })
  },
// 删除
  deleteContact: function(e) {
    console.log(e)
    let val = e.currentTarget.dataset.info
    let _this = this
    util.request(['personalCenter', 'deleteMemberEmergencyContact'], [parseInt(val.id)], res => {
      console.log(res)
      wx.showToast({
        title: '删除成功',
      })
      _this.data.contactList.splice(_this.data.activeIndex, 1)
      _this.setData({
        contactList: _this.data.contactList
      })
    })
  },