锲子

微信小程序自定义左滑功能加上跳转,换成以往,左滑功能的逻辑一般是在js中实现,但在拖动方面,性能并不是那么的流畅。如今,官方新扩展了一套脚本语言wxs,在IOS设备上运行,性能会比JS快2~20倍,至于安卓上运行效率无差异。

构思

结合wxs,做左滑功能主要分为三个步骤:拖动开始=>拖动中=>拖动结束

让我们看看,这三个步骤需要做好哪些工作?

拖动开始

  1. 获取触发事件点的坐标数据
  2. 将坐标数据存到组件中,“拖动中”和“拖动结束”这两步骤要用上

拖动中

  1. 拿到拖动开始时存储的坐标数据
  2. 获取每一个拖动点的坐标数据,计算出与拖动开始的坐标数据的横坐标之差
  3. 根据计算出的横坐标之差加上当前左滑的距离,设置该组件的样式

拖动结束

  1.  拿到拖动开始时存储的坐标数据
  2. 获取离开时触发点的坐标数据,计算出与拖动开始的坐标数据的横坐标之差
  3. 根据计算出的结果,判断拖动是向左还是向右?最好设置好该组件的样式

代码片段

预览效果

 代码片段链接:https://developers.weixin.qq.com/s/r89ejJmP7ncM

12-28 02:29
查看更多