小程序相似抖音視頻整屏切換

更新

如今已經更新了github地址和效果gif，可在文章最後查看。若是個人代碼對你有用，請幫我隨手star一下。

需求

最近在項目中須要加一個功能，在小程序中將已有的短視頻功能，按照抖音的方式來瀏覽，整屏，可上下滑動切換視頻，並添加上滑下滑的動畫。

思路

1.在video標籤上添加時間監聽。 2.若是1沒法成功，就在video上面罩一層 cover-view，在cover-view上添加時間監聽。 3.若是上面兩種方法都不行，用小程序的onPageScroll頁面處理函數來監聽頁面的滾動。 4.上述三種方法都不行的話，用canvas在video上面罩一層，監聽滾動事件。

嘗試

如今video標籤上添加了觸摸事件的監聽，可是沒法成功監聽到觸摸事件。 由於video 是原生組件，層級較高，因此嘗試在上面罩一層cover-view，並監聽滾動事件，可是一樣沒法監聽。

前面兩種方法不行，我就採用了onPageScroll來監聽頁面是否發生滾動。這個方法會拿到當前頁面在垂直方向已滾動的距離。scrollindex用來控制滾動，totalNum是滾動的總數，部分代碼以下

在ios上能夠知足需求，能上下滾動，也能加上動畫，可是在安卓上卻不能動，嘗試着在頁面json文件中配置滾動相關，但都沒辦法，因此這個方法也不行了。

最後只有canvas這一個辦法了，在video組件上面定位一個canvas，在上面添加時間監聽，這是發現成功了，能夠在控制檯看到打印出來的監聽 console。

實現

wxml：下面是wxml代碼，主要思路就是讓video寬高等於屏幕，點贊評論分享等功能，用cover-view定位到視頻上方，在將canvas定位到video上面滾動時滾動的是封面圖案，video標籤只有一個，滾動更改video的src。

wxss:都是一些定位相關的樣式沒有特殊的樣式就不貼圖了。不過作的時候這裏有個坑，產品但願添加無限的向下滑動視頻，能夠無限加載，因此最開始我才用的是animation動畫，對每一屏根據手指向上或者向下添加動畫，這樣作的話就沒法作到，後來發現可使用小程序的api，wx.createAnimation()在js中實現。

js：onload的時候this.animation = wx.createAnimation();用於切換時建立動畫。

須要監聽的滾動事件

js主要作的是判斷滾動方向，給wxml經過微信提供的animation方法來動態添加動畫，這樣就能夠實現無限加載的需求了。scrollTop的做用是用來調整video標籤位置，由於如今滾動的時候添加滾動的事視頻的封面圖不是視頻自己，須要隱藏視頻，假如用wx:if；哎控制的話，會致使視頻隱藏在展示以後沒法監聽以前添加的事件。

效果

在真機上能夠生效，在手機上錄了視頻不知道怎麼傳上來，轉gif也沒找到在mac怎麼轉。。。

更新上來了gif，不過gif感受稍微有點卡頓，沒手機上流暢。手機ios也是比安卓的流暢不少。可是都比這個圖片流暢。。。並且如今視頻地址都掛了，因此一直轉圈緩衝，沒辦法播放只剩下這個圖片了，正常緩衝結束後是會播放的。

最後

弄了很久弄出來的，真機和模擬器的效果差別很大，最好在真機測試。目前也不知道有沒有更好的辦法，菜鳥前端一個～

補充

github地址：github.com/xuguoyii/wx…