小步调原生实现左滑抽屉菜单

• WXS 相应变乱
  
• 方案A
  
  
  
  • 页面布局和样式
    
  
  
• WXS 变乱回调函数
  
• WXS 脚本
  
• 遮罩层
  
• 方案B
  
• 为什么要使用 WXS
  
• 结语 & 参考资料
  
• 参考资料：
  

touchstart, touchmove, touchend
复制代码

   

• 与 JS 隔离，不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API   
  
• 只能相应小程序内置组件的变乱，不支持自定义组件的变乱回调   
  
• 变量与函数默以为模块私有，通过

   module.exports 
  复制代码

  对外暴露   
  
• 使用标签在 WXML 中引入使用（必须使用相对路径）
  

// index.wxs

function touchStart(e, ins) {}
function touchMove(e, ins) {}
function touchEnd(e, ins) {}

module.exports = {
  touchstart: touchStart,
  touchmove: touchMove,
  touchend: touchEnd
}
<wxs module="drawer" src="./index.wxs"></wxs>

<view bindtouchstart="{{drawer.touchstart}}"
      bindtouchmove="{{drawer.touchmove}}" 
      bindtouchend="{{drawer.touchend}}">
</view>
复制代码

<wxs module="drawer" src="./index.wxs"></wxs>

<view>
  <view class="main" bindtouchstart="{{drawer.touchstart}}"
    bindtouchmove="{{drawer.touchmove}}" bindtouchend="{{drawer.touchend}}">
    <view>
      右滑显示侧边菜单 方案A
    </view>
  </view>

  <view class="drawer" data-drawerwidth="150">
    <view class="drawer-item">drawerA</view>
    <view wx:for="{{[1, 2, 3]}}" class="drawer-item">
      <text>menu item {{item}}</text>
    </view>
  </view>
</view>
复制代码

   

• 准确引入 wxs 模块（必须用相对路径）   
  
• 举行滑动手势时菜单是埋伏的，所以现实上是在主界面上举行滑动，所以三个滑动变乱回调必要绑定在主体内容的 view 上面   
  
• 举行移动的是 .drawer 元素，必要设置好 class 属性方便获取   
  
• 抽屉元素的 data-drawerwidth 属性通过 dataset 传值给 wxs 脚本，规定了菜单的宽度，必要和样式保持同等
  

.main {
  height: 100vh;
  width: 100%;
  position: absolute;
}

.drawer {
  height: 100vh;
  width: 150px;
  position: absolute;
  transition: transform 0.4s ease; /* 位移使用transform实现，加个过渡动画更顺滑 */
  left: -150px;  /* width、偏移与WXML中的数值保持一致，初始状态隐藏菜单 */
}
复制代码

   


• event 
  复制代码

  是小程序变乱对象，并在此基础上多了触发变乱的组件的实例

  event.instance
  复制代码

     
  

• ownerInstance 
  复制代码

  是触发变乱的组件的父组件（页面）的实例
  

ComponentDescriptor
复制代码

var wxsFunction = function(event, ownerInstance) {
    var instance = ownerInstance.selectComponent('.classSelector') // 返回组件的实例
    instance.setStyle({
        "font-size": "14px" // 支持rpx
    })
    instance.getDataset()
    instance.setClass(className)

    return false // 不往上冒泡，相当于调用了同时调用了stopPropagation和preventDefault
}
复制代码

   

• 不要用 let, const 声明变量，会报错   
  
• 把设置 transform 属性 X 位移的代码简单封装一下，看起来更雅观   
  
• judge point 类似于吸附结果，就是菜单划出来超过某一位置就主动把剩余部分打开
  

var startmark = 0;
var status = 0;  // 菜单开闭状态
var JUDGEPOINT = 0.7;

function touchStart(e, ins) {
  var pageX = (e.touches[0] || e.changedTouches[0]).pageX;
  startmark = pageX;
}

function touchMove(e, ins) {
  var pageX = (e.touches[0] || e.changedTouches[0]).pageX;
  var offset = pageX - startmark;
  var drawerComp = ins.selectComponent('.drawer');
  var drawerWidth = drawerComp.getDataset().drawerwidth;

  if (offset > 0 && status == 0) {
    setCompTransX(drawerComp, Math.min(drawerWidth, offset))
  } else if (offset < 0 && status == 1) {
    setCompTransX(drawerComp, Math.max(0, offset))
  }
}

function touchEnd(e, ins) {
  var pageX = (e.touches[0] || e.changedTouches[0]).pageX;
  var offset = pageX - startmark;
  var drawerComp = ins.selectComponent('.drawer');
  var drawerWidth = drawerComp.getDataset().drawerwidth;

  if (offset > 0 && status == 0) {
    if (offset < drawerWidth * JUDGEPOINT) {
      setCompTransX(drawerComp, 0);
    } else {
      setCompTransX(drawerComp, drawerWidth);
      status = 1;
    }
  } else if (offset < 0) {
    setCompTransX(drawerComp, 0);
    status = 0;
  }
}

function setCompTransX(comp, x) {
  comp.setStyle({
    transform: 'translateX(' + x + 'px)',
  })
}

module.exports = {
  touchstart: touchStart,
  touchmove: touchMove,
  touchend: touchEnd
}
复制代码

<view class="main"></view>
<view class="mask" data-maxopacity="0.6"></view>
<view class="drawer" data-drawerwidth="150"></view>
复制代码

.mask {
  height: 100vh;
  width: 100%;
  position: fixed;
  transition: opacity 0.4s ease;
  opacity: 0;
  pointer-events: none;
  background-color: #548CA8;
}
复制代码

function setDrawer(x) {
  setCompTransX(drawerComp, x);
  maskComp.setStyle({
    opacity: x / drawerWidth * maskOpacity,
  })
}
复制代码

<view class="drawer"></view>

<view class="main" 
      data-drawerwidth="150" 
      bindtouchstart="{{drawer.touchstart}}"
      bindtouchmove="{{drawer.touchmove}}" 
      bindtouchend="{{drawer.touchend}}">
</view>
复制代码

.main {
  height: 100vh;
  width: 100%;
  position: absolute;
  transition: transform 0.4s ease;
}

.drawer {
  height: 100vh;
  width: 150px;
  position: absolute;
}
复制代码

function touchMove(e, ins) {
  var pageX = (e.touches[0] || e.changedTouches[0]).pageX;
  var offset = pageX - startmark;
  var mainComp = ins.selectComponent('.main');
  var drawerWidth = mainComp.getDataset().drawerwidth;

  if (offset > 0 && status == 0) {
    setCompTransX(mainComp, Math.min(drawerWidth, offset))
  } else if (offset < 0 && status == 1) {
    setCompTransX(mainComp, Math.max(0, offset))
  }
}
复制代码