A 菜单在上层A2 菜单在上层,下层遮罩B 菜单在下层
WXS 响应事件手势控制菜单的原理很简单:小程序提供了一系列触摸手势触发的事件,包括触摸开始、移动、结束(touchstart, touchmove, touchend)等等。在这些事件上绑定自定义的事件响应函数,即可实现根据手势打开关闭菜单的操作。
出于性能考虑,事件处理函数最好放在 WXS、而不是 JS 文件中。具体原理与小程序的运行环境有关,感兴趣的话可以去文末查看。WXS 是小程序的专用脚本语言(WXS 与JS 的关系相当于 WXSS 与CSS 的关系),语法和 JS 类似,有部分区别,比如:
与JS 隔离,不能调用其他 JavaScript 文件中定义的函数,也不能调用小程序提供的API只能响应小程序内置组件的事件,不支持自定义组件的事件回调变量与函数默认为模块私有,通过module.exports对外暴露使用标签在 WXML 中引入使用(必须使用相对路径)
wxs 文件和 wxml 文件中的基本写法如下:
// index.wxs function touchStart(e, ins) {} function touchMove(e, ins) {} function touchEnd(e, ins) {} module.exports = { touchstart: touchStart, touchmove: touchMove, touchend: touchEnd }
方案A
页面结构和样式
这是最常见的抽屉菜单样式之一,滑动主体内容不动,菜单在上层显示。