微信小程序 特效菜单抽屉效果实例代码(2)

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() }); }

总体逻辑并不复杂,主要是做好状态判断和坐标运算,但有些问题需要注意

1: 微信小程序提供了rpx单位用于适配设备,但是各种滑动事件和动画的单位通常是px,因此需要进行转换,转换方法为 rpx = px * pixelRatio,其中pixelRatio可以通过 wx.getSystemInfoSync()获取

2: 当对组件使用通过wx.createAnimation 创建的动画时,小程序框架会给组件添加transform属性,其中translateX值会和left属性相互作用,因此计算left值时需要处理translateX的值。

3: 由于在真机环境下,页面左滑(初始触摸点在左侧边界时)默认行为是返回上一页或退出小程序(取决与是否是第一级页面), 抽屉菜单会和该行为发生冲突。

另外目前还不支持swiper操作,后续有机会再补上吧。

源码下载:(jb51.net).rar

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwdswz.html