用小程序写一个“抖音”

小程序一个page里面不要放两个video组件。——鲁迅

video是算是小程序中坑最多、最深的组件之一。在早期的小程序版本库中，一个page中若是放2个video组件的话会带来不少的麻烦。若是想像原生应用那样“纵享丝滑”般滑动、切换视频，几乎是不可能的。因此咱们能够用一些替代的方案来实现。 这里我是用图片来作滑动；视频固定，直接切换播放src。效果大体以下（若有侵权，告知删除）：

效果图是这样的，那如何来实现呢，主要要解决什么问题？

• 滑动手势：简单的滑动识别
• 滑动动画：在小程序中滑动视频组件不是个明智的选择
• 切换视频：直接切换video组件的src便可，可是会有闪

解决了上面三个问题，就能够实现了小程序版抖音。大体思路以下：

由于小程序中video组件是原生组件，它是高于其余非原生组件的。只能用一个video组件，因此能够考虑这样作：咱们把视频列表称为videos，把videos的poster做为背景图一张一张铺开，以下所示。而后把惟一一个video组件，将其位置固定于页面视窗中。由于小程序video组件高于其余组件，因此正常咱们只能看到视频video1（盖在image1之上）。

当咱们手机向上滑动，此时须要小程序的wx.createAnimation来控制底部的images滑动，制造滑动动画。固然，咱们须要控制video，让其隐藏，因此就能够看到背景图片向上滑动的动画。等到滑动的同时，咱们切换video的src，由video1切换到video2，image2也正是video2的poster，而后video2进行播放，此时此刻就仿佛在抖音上的彼时彼刻，切换完成。

因此，最终流程以下：

如上所述，咱们在小程序中用背景图平移动画来模拟视频的切换动画。我能想到的小程序实现视频滑动切换的方案就是这样子，若是有其余想法，欢迎指出。

代码🔗 github.com/xunuo0x/vis… 欢迎指出问题，欢迎💗