最近在項(xiàng)目中需要加一個(gè)功能，在小程序中將已有的短視頻功能，按照抖音的方式來(lái)瀏覽，整屏，可上下滑動(dòng)切換視頻，并添加上滑下滑的動(dòng)畫(huà)。

思路

1.在video標(biāo)簽上添加時(shí)間監(jiān)聽(tīng)。 2.如果1無(wú)法成功，就在video上面罩一層 cover-view，在cover-view上添加時(shí)間監(jiān)聽(tīng)。 3.如果上面兩種方法都不行，用小程序的onPageScroll頁(yè)面處理函數(shù)來(lái)監(jiān)聽(tīng)頁(yè)面的滾動(dòng)。 4.上述三種方法都不行的話(huà)，用canvas在video上面罩一層，監(jiān)聽(tīng)滾動(dòng)事件。

嘗試

現(xiàn)在video標(biāo)簽上添加了觸摸事件的監(jiān)聽(tīng)，但是無(wú)法成功監(jiān)聽(tīng)到觸摸事件。 因?yàn)関ideo 是原生組件，層級(jí)較高，所以嘗試在上面罩一層cover-view，并監(jiān)聽(tīng)滾動(dòng)事件，但是同樣無(wú)法監(jiān)聽(tīng)。

前面兩種方法不行，我就采用了onPageScroll來(lái)監(jiān)聽(tīng)頁(yè)面是否發(fā)生滾動(dòng)。這個(gè)方法會(huì)拿到當(dāng)前頁(yè)面在垂直方向已滾動(dòng)的距離。scrollindex用來(lái)控制滾動(dòng)，totalNum是滾動(dòng)的總數(shù)，部分代碼如下

在ios上可以滿(mǎn)足需求，能上下滾動(dòng)，也能加上動(dòng)畫(huà)，但是在安卓上卻不能動(dòng)，嘗試著在頁(yè)面json文件中配置滾動(dòng)相關(guān)，但都沒(méi)辦法，所以這個(gè)方法也不行了。

最后只有canvas這一個(gè)辦法了，在video組件上面定位一個(gè)canvas，在上面添加時(shí)間監(jiān)聽(tīng)，這是發(fā)現(xiàn)成功了，可以在控制臺(tái)看到打印出來(lái)的監(jiān)聽(tīng) console。

實(shí)現(xiàn)

wxml：下面是wxml代碼，主要思路就是讓video寬高等于屏幕，點(diǎn)贊評(píng)論分享等功能，用cover-view定位到視頻上方，在將canvas定位到video上面滾動(dòng)時(shí)滾動(dòng)的是封面圖案，video標(biāo)簽只有一個(gè)，滾動(dòng)更改video的src。

wxss:都是一些定位相關(guān)的樣式?jīng)]有特殊的樣式就不貼圖了。不過(guò)做的時(shí)候這里有個(gè)坑，產(chǎn)品希望添加無(wú)限的向下滑動(dòng)視頻，可以無(wú)限加載，所以最開(kāi)始我才用的是animation動(dòng)畫(huà)，對(duì)每一屏根據(jù)手指向上或者向下添加動(dòng)畫(huà)，這樣做的話(huà)就無(wú)法做到，后來(lái)發(fā)現(xiàn)可以使用小程序的api，wx.createAnimation()在js中實(shí)現(xiàn)。

js：onload的時(shí)候this.animation = wx.createAnimation();用于切換時(shí)創(chuàng)建動(dòng)畫(huà)。

需要監(jiān)聽(tīng)的滾動(dòng)事件

js主要做的是判斷滾動(dòng)方向，給wxml通過(guò)微信提供的animation方法來(lái)動(dòng)態(tài)添加動(dòng)畫(huà)，這樣就可以實(shí)現(xiàn)無(wú)限加載的需求了。scrollTop的作用是用來(lái)調(diào)整video標(biāo)簽位置，因?yàn)楝F(xiàn)在滾動(dòng)的時(shí)候添加滾動(dòng)的事視頻的封面圖不是視頻本身，需要隱藏視頻，假如用wx:if；哎控制的話(huà)，會(huì)導(dǎo)致視頻隱藏在展現(xiàn)之后無(wú)法監(jiān)聽(tīng)之前添加的事件。

效果

在真機(jī)上可以生效，在手機(jī)上錄了視頻不知道怎么傳上來(lái)，轉(zhuǎn)gif也沒(méi)找到在mac怎么轉(zhuǎn)。。。

最后

弄了好久弄出來(lái)的，真機(jī)和模擬器的效果差異很大，最好在真機(jī)測(cè)試。目前也不知道有沒(méi)有更好的辦法，菜鳥(niǎo)前端一個(gè)～