抽屉菜单是app上常见的菜单设计方式,典型的抽屉菜单如下图所示
下面展示如何基于微信小程序实现抽屉菜单,最终效果如下图所示:
页面包含一个主页和抽屉菜单页,为了实现滑动效果,页面采用absolute布局,代码如下
index.wxml
rush:html;toolbar:false">{{userInfo.nickName}} {{userInfo.nickName2}}
index.wxss
rush:css;toolbar:false">.main-page { width:100%; height:2000rpx; position: absolute; top: 0; left: 0; padding: 200rpx 0; } .drawer-menu { width: 800rpx; height:2000rpx; position: absolute; top: 0; left: -800rpx; padding: 200rpx 0; background: rgba(22, 22, 22, 1); z-index: 800; }
ottom: 1.1em; Box-sizing: border-Box; color: rgb(63, 63, 63); text-indent: 0px; white-space: normal;">程序绑定了主页的touch事件和tap事件,并且使用Box-sizing: border-Box; padding: 2px 4px; background-color: rgba(128, 128, 128, 0.075); white-space: Nowrap; border-radius: 0px;">catchtouchmove
阻止了move事件的传递,因为在真机环境下页面会自动响应滑动事件,注意不要catch Box-sizing: border-Box; padding: 2px 4px; background-color: rgba(128, 128, 128, 0.075); white-space: Nowrap; border-radius: 0px;">start
和Box-sizing: border-Box; padding: 2px 4px; background-color: rgba(128, 128, 128, 0.075); white-space: Nowrap; border-radius: 0px;">end
事件,这会导致无法触发Box-sizing: border-Box; padding: 2px 4px; background-color: rgba(128, 128, 128, 0.075); white-space: Nowrap; border-radius: 0px;">tap
事件。
ottom: 1.1em; Box-sizing: border-Box; color: rgb(63, 63, 63); text-indent: 0px; white-space: normal;">首先定义一些数据来记录滑动过程和状态
rush:html;toolbar:false">drawerMenuMoveData: { check: false, //是否触发滑动操作 state:0,//0:初始状态 1:菜单弹出中状态 2:菜单弹入状态中 3:菜单弹出状态 firstTouchX:0,//首次触摸X坐标值 touchCheckX:60,//触发滑动的触摸X moveX:0, // 滑动操作横向的移动距离 maxMoveX: (app.globalData.deviceInfo.windowWidth - 60), //抽屉菜单最大移动距离 lastTranlateX: 0//上次动画效果的平移距离,用于校准left值 },
Box-sizing: border-Box; color: rgb(63, 63, 63); white-space: normal;"/> ottom: 1.1em; Box-sizing: border-Box; color: rgb(63, 63, 63); text-indent: 0px; white-space: normal;">总体逻辑并不复杂,主要是做好状态判断和坐标运算,但有些问题需要注意 ottom: 1.1em; Box-sizing: border-Box; color: rgb(63, 63, 63); text-indent: 0px; white-space: normal;">1: 微信小程序提供了rpx单位用于适配设备,但是各种滑动事件和动画的单位通常是px,因此需要进行转换,转换方法为 ottom: 1.1em; Box-sizing: border-Box; color: rgb(63, 63, 63); text-indent: 0px; white-space: normal;">2: 当对组件使用通过 ottom: 1.1em; Box-sizing: border-Box; color: rgb(63, 63, 63); text-indent: 0px; white-space: normal;">3: 由于在真机环境下,页面左滑(初始触摸点在左侧边界时)默认行为是返回上一页或退出小程序(取决与是否是第一级页面), 抽屉菜单会和该行为发生冲突。 ottom: 1.1em; Box-sizing: border-Box; color: rgb(63, 63, 63); text-indent: 0px; white-space: normal;">另外目前还不支持 版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。Box-sizing: border-Box; padding: 2px 4px; color: rgb(63, 63, 63); background-color: rgba(128, 128, 128, 0.075); border-radius: 0px;">touchstart
rush:html;toolbar:false">onMainPagetouchstart: function(e) {
var data = this.drawerMenuMoveData;
var clientX = e.touches[0].clientX;
//初识状态
if (data.state === 0) {
if (clientX <= data.touchCheckX && clientX > 20) {
data.check = true;
data.state = 1;
data.firstTouchX = clientX;
}
}
//菜单弹出状态
else if (data.state === 3) {
if (clientX >= data.maxMoveX) {
data.check = true;
data.state = 2;
data.firstTouchX = clientX;
}
}
},
Box-sizing: border-Box; padding: 2px 4px; color: rgb(63, 63, 63); background-color: rgba(128, 128, 128, 0.075); border-radius: 0px;">touchmove
菜单页的left值来产生滑动效果rush:html;toolbar:false">onMainPagetouchmove: function(e) {
var data = this.drawerMenuMoveData;
var pixelRatio = app.globalData.deviceInfo.pixelRatio;
if (data.check) {
var mainPageLeft = 0, drawerMenuLeft = 0;
var moveX = e.touches[0].clientX - data.firstTouchX;
if (data.state === 1)
{
//处理边界状态
if (moveX < 0) {
moveX = 0;
}
if (moveX > data.maxMoveX) {
moveX = data.maxMoveX;
}
if (moveX >= 0 && moveX <= data.maxMoveX) {
data.moveX = moveX;
moveX = moveX - data.lastTranlateX;
//px转为rpx
moveX = moveX * pixelRatio;
mainPageLeft = moveX;
drawerMenuLeft = -800 + moveX;
}
}
else if (data.state === 2) {
//处理边界状态
if (moveX > 0) {
moveX = 0;
}
if (moveX < -data.maxMoveX) {
moveX = -data.maxMoveX;
}
if (moveX <= 0 && moveX >= -data.maxMoveX) {
data.moveX = moveX;
moveX = moveX - data.lastTranlateX;
//px转为rpx
moveX = moveX * pixelRatio;
var maxMoveX = data.maxMoveX * pixelRatio;
mainPageLeft = maxMoveX + moveX;
drawerMenuLeft = maxMoveX -800 + moveX;
}
}
this.setData({mainPageLeft: mainPageLeft,
drawerMenuLeft: drawerMenuLeft});
}
},
Box-sizing: border-Box; padding: 2px 4px; color: rgb(63, 63, 63); background-color: rgba(128, 128, 128, 0.075); border-radius: 0px;">touchend
菜单是否弹出,并创建滑动动画 (windowWidth / 2)) {
translateX = data.maxMoveX - moveX;
data.state = 3;
}
else {
translateX = -moveX;
data.state = 0;
}
}
else if (data.state === 2) {
if (moveX === 0 || moveX === -data.maxMoveX) {
data.state = (moveX === 0) ? 3 : 0;
return;
}
//滑动距离是否超过窗口宽度一半
mainPageLeft = data.maxMoveX + moveX
if (mainPageLeft > (windowWidth / 2)) {
translateX = -moveX;
data.state = 3;
}
else {
translateX = -mainPageLeft;
data.state = 0;
}
}
translateX += data.lastTranlateX;
data.lastTranlateX = translateX;
animation.translateX(translateX).step();
this.setData({
animationData:animation.export()
});
},
Box-sizing: border-Box; padding: 2px 4px; color: rgb(63, 63, 63); background-color: rgba(128, 128, 128, 0.075); border-radius: 0px;">tap
菜单弹回rush:java;toolbar:false">onMainPageTap: function(e) {
var data = this.drawerMenuMoveData;
if (data.state !== 3) {
return;
}
data.state = 0;
var translateX = -data.maxMoveX;
translateX += data.lastTranlateX;
data.lastTranlateX = translateX;
var animation = wx.createAnimation({duration: 100});
animation.translateX(translateX).step();
this.setData({
animationData:animation.export()
});
}
Box-sizing: border-Box; padding: 2px 4px; background-color: rgba(128, 128, 128, 0.075); white-space: Nowrap; border-radius: 0px;">rpx = px * pixelRatio
,其中Box-sizing: border-Box; padding: 2px 4px; background-color: rgba(128, 128, 128, 0.075); white-space: Nowrap; border-radius: 0px;">pixelRatio
可以通过 Box-sizing: border-Box; padding: 2px 4px; background-color: rgba(128, 128, 128, 0.075); white-space: Nowrap; border-radius: 0px;">wx.getSystemInfoSync()
获取Box-sizing: border-Box; padding: 2px 4px; background-color: rgba(128, 128, 128, 0.075); white-space: Nowrap; border-radius: 0px;">wx.createAnimation
创建的动画时,小程序框架会给组件添加Box-sizing: border-Box; padding: 2px 4px; background-color: rgba(128, 128, 128, 0.075); white-space: Nowrap; border-radius: 0px;">transform
属性,其中Box-sizing: border-Box; padding: 2px 4px; background-color: rgba(128, 128, 128, 0.075); white-space: Nowrap; border-radius: 0px;">translateX
值会和Box-sizing: border-Box; padding: 2px 4px; background-color: rgba(128, 128, 128, 0.075); white-space: Nowrap; border-radius: 0px;">left
属性相互作用,因此计算Box-sizing: border-Box; padding: 2px 4px; background-color: rgba(128, 128, 128, 0.075); white-space: Nowrap; border-radius: 0px;">left
值时需要处理Box-sizing: border-Box; padding: 2px 4px; background-color: rgba(128, 128, 128, 0.075); white-space: Nowrap; border-radius: 0px;">translateX
的值。Box-sizing: border-Box; padding: 2px 4px; background-color: rgba(128, 128, 128, 0.075); white-space: Nowrap; border-radius: 0px;">swiper
操作,后续有机会再补上吧。