锲子
微信小程序自定义左滑功能加上跳转,换成以往,左滑功能的逻辑一般是在js中实现,但在拖动方面,性能并不是那么的流畅。如今,官方新扩展了一套脚本语言wxs,在IOS设备上运行,性能会比JS快2~20倍,至于安卓上运行效率无差异。
构思
结合wxs,做左滑功能主要分为三个步骤:拖动开始=>拖动中=>拖动结束
让我们看看,这三个步骤需要做好哪些工作?
拖动开始
- 获取触发事件点的坐标数据
- 将坐标数据存到组件中,“拖动中”和“拖动结束”这两步骤要用上
拖动中
- 拿到拖动开始时存储的坐标数据
- 获取每一个拖动点的坐标数据,计算出与拖动开始的坐标数据的横坐标之差
- 根据计算出的横坐标之差加上当前左滑的距离,设置该组件的样式
拖动结束
- 拿到拖动开始时存储的坐标数据
- 获取离开时触发点的坐标数据,计算出与拖动开始的坐标数据的横坐标之差
- 根据计算出的结果,判断拖动是向左还是向右?最好设置好该组件的样式
代码片段
预览效果