微信小程序左滑出现菜单

微信小程序左滑出现菜单，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下载地址