小程序左滑列表進行操作

使用movable-area和movable-view實現列表項左滑取消收藏（其他操作同理）

效果：

wxml：

<movable-area style="height:200rpx;width:690rpx;overflow:hidden;" 
              class="mb-20 bs-e0 br-32">
  <movable-view style="height:200rpx;width:910rpx;" 
                x="{{x}}" y="{{y}}" 
                direction="horizontal"
                catchtouchstart='touchStart' 
                catchtouchend="touchEnd"
  >
    <view class="favourite-list">
      <image src="/images/register-img.png"></image>
      <view class="book-info">
    <view class="mb-15 mxw-470 ellipse1">新版林格倫作品選集·美繪版</view>
    <view class="fs-20 c-999 mb-10 mxw-470 ellipse1">阿斯特里德·林格倫/中國少年兒童出版社/2009-10-11</view>
    <view class="fs-24">原價:18.00元</view>
      </view>
      <view class="cancel fs-24 c-fff">取消收藏</view>
    </view>
  </movable-view>
</movable-area>

文檔：https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html

部分樣式：

.favourite-list {
  display: flex;
  align-items: center;
  height: 200rpx;
  padding: 0 0 0 30rpx;
}
.favourite-list image {
  width: 140rpx;
  height: 140rpx;
  margin-right: 20rpx;
  border-radius: 16rpx;
}
.favourite-list .book-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.favourite-list .cancel {
  width:220rpx;
  height:200rpx;
  line-height: 200rpx;
  margin-left: auto;
  background:#FF7777;
  text-align: center;
}
.mxw-470 {
  max-width: 470rpx;
}
.ellipse1 {
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

其中的margin-left: auto;可以讓取消收藏位於容器最右側

js：

data: {
  x: 0,
  y: 0
},
touchStart(e) {
  // console.log(e)
  this.setData({
    "startX": e.changedTouches[0].clientX,
    "startY": e.changedTouches[0].clientY
  });
},
touchEnd(e) {
  let endX = e.changedTouches[0].clientX;
  let endY = e.changedTouches[0].clientY;
  let startX = this.data.startX;
  let startY = this.data.startY;
  let percentage = wx.getSystemInfoSync().windowWidth / 750;
  let x = 220 * percentage;
  if (endX - startX > 50 && Math.abs(endY - startY) < 50) {  //右滑
    this.setData({
      x
    })
  } else if (endX - startX < -50 && Math.abs(endY - startY) < 50) {   //左滑
    this.setData({
      x: -x
    })
  } else {
    this.setData({
      x: 0
    })
  }
},

這里的單位需要將rpx轉為px

rpx（responsive pixel）: 可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。