小程序中类抖音的交互实现方案
首先思考一个问题，如果想要在小程序中实现抖音上下切换、拥有漂浮物按钮等怎么办？ 这个问题从 18 年 9 月开始一直让我头痛到睡不着觉，历时八个月，中间有过微信的更新，有过我们自己的努力，终于把这个坑爬出来了。下面会逐一做解决问题的分析，如果想看结果可以直接跳到结尾。 作为稍微有一点经验的前端，看到这道题的时候可能会代入传统网页的思想。 pageScrollTo式 准备 N 个视频容器，在容器上做滑动、点击等事件监听，touchStart 时记录手指 XY 轴，结束时 diff XY 轴判断滑动方向然后调用 pageScrollTo 页面的滚动，滚动到上一个或下一个容器的位置。当然了，这是最基础的想法，且先不说touchStart 到touchEnd 件单靠 XY 轴改变值来判断是否滚动这样的触发条件可靠，视频一多起来实例简直要卡上天，并且如果想要实现手指拖多少视频容器滚动多少，就需要频繁调用 setData，这在小程序中是一个相当高危的操作，即使做了节流性能依旧好不到哪里去，IOS 上可能通过 transition 来让他看起来不卡顿但是有段落感，…