微信小程序左滑删除利用微信的movable-area/movable-view组件实现

利用微信的movable-area/movable-view组件

wxml

<movable-area wx:for="{{contactList}}" >
        <movable-view direction="horizontal"  bindtouchstart="touchstart" x="{{selectPhone == item.phone?'-90':'0'}}" data-phone="{{item.phone}}">
          <view class="contact-msg">
             <view>
              <text>{{item.name}}</text>
            </view>
            <view>
              <text>{{item.phone}}</text>
            </view>
          </view>
          <view class="contact-del">删除</view>
        </movable-view>
      </movable-area>

wxss

.contact-msg{
  height: 120rpx;
  width: calc(750rpx - 60rpx);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0px 30rpx 0px 30rpx;
  align-items: center;
  background-color: #ffffff;
}
movable-area{
  height: 120rpx;
  width: 100%;  
  border-bottom: 1px solid #dddddd;
}
movable-view{
  height: 120rpx;
  width: 910rpx;
  display: flex;
}

js

data: {
    contactList:[
      {"name":"李李李","phone":"183838324"},
      {"name":"李李33李","phone":"1838383225"},
      {"name":"李李11李","phone":"1838383226"},
      {"name":"李李22李","phone":"1838383227"}
    ],
    selectPhone:"",
  },
touchstart(e){
  this.setData({
    selectPhone:e.currentTarget.dataset["phone"]
  })
},