抽屉菜单是app上常见的菜单设计方式,典型的抽屉菜单如下图所示
下面展示如何基于微信小程序实现抽屉菜单,最终效果如下图所示:
页面包含一个主页和抽屉菜单页,为了实现滑动效果,页面采用absolute布局,代码如下
index.wxml
{{userInfo.nickName}} {{userInfo.nickName2}}
index.wxss
阻止了move事件的传递,因为在真机环境下页面会自动响应滑动事件,注意不要catch
和
事件,这会导致无法触发
事件。
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; } } },
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}); } },
(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() }); },
,其中
可以通过
获取
创建的动画时,小程序框架会给组件添加
属性,其中
值会和
属性相互作用,因此计算
值时需要处理
的值。
操作,后续有机会再补上吧。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。