微信小程序左滑出現菜單

微信小程序左滑出現菜單，https://download.csdn.net/download/qq_38880700/11856487

 實現步驟

1. 佈局採用絕對定位，通過left的偏移位置進行菜單的出現和隱藏；
2. 捕捉touch事件，對左滑右滑進行處理。

 代碼

   佈局 ，初次進入時默認類名爲 “content-scroll-text” 的view標籤 寬度爲100%；向左偏移爲0，類名爲"content-scroll-bt"的按鈕寬度爲0，左偏移爲100%

<view class="content1">
  <view class="content-scroll">
    <view class="content-scroll-text" style="left:{{_leftTxt}};width:calc(100% - {{_leftTxt}})" catch:touchstart="_touchstart" catch:touchend="_touchend"> 
      不實心不---------------------------------------1。
    </view>
    <view class="content-scroll-bt" style="left:calc(100% - {{_leftBt}}) ; width:{{_leftBt}}" bindtap="shanchu">
      <view class="content-scroll-bt-shanchu">刪除</view>
    </view>
  </view>
</view>

邏輯，對左滑右滑進行綁定監聽，對小於10的不做處理

// components/slide-item/slide-item.js
Page({
  /**
   * 組件的初始數據
   */
  data: {
    _start: 0,
    _leftTxt: '0px',
    _leftBt: '0px',
    scrollFlag: false
  },
  //按下事件
  _touchstart(e) {
    this.setData({
      _start: e.changedTouches[0].pageX
    })
  },
  //按下結束事件
  _touchend(e) {
    let _end = e.changedTouches[0].pageX;
    if (_end > this.data._start) {
      console.log("右滑");
      if (_end - this.data._start <= 10) {
        console.log("右滑幅度小，不觸發事件");
      } else {
        if (this.data.scrollFlag) { //當刪除出現時進行復原
          console.log("右滑事件觸發,並且進行復原");
          this.setData({
            _leftTxt: "0px",
            _leftBt: "0px"
          })
        }
      }
    } else {
      if (this.data._start - _end <= 10) {
        console.log("左滑幅度小，不觸發事件");
      } else {
        console.log("左滑事件觸發");
        this.setData({
          _leftTxt: "-80px",
          _leftBt: "80px",
          scrollFlag: true
        })
      }
    }
  },
  shanchu() {
    wx.showToast({
      title: '刪除',
      icon: 'success',
      duration: 2000
    })
  }

})

demo下載地址      

CSND下載地址       git下載地址