小程式類似抖音視訊整屏切換

Terrymes發表於2018-11-13

更新

現在已經更新了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；哎控制的話，會導致視訊隱藏在展現之後無法監聽之前新增的事件。