用小程序寫一個「抖音」

小程序一個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… 歡迎指出問題，歡迎💗