最近在項目中(zhong)需要加一個功能，在小(xiao)程序(xu)中(zhong)將已有(you)的(de)短視(shi)頻功能，按照(zhao)抖音的(de)方(fang)式來瀏覽，整(zheng)屏，可上(shang)下滑動切(qie)換視(shi)頻，并添加上(shang)滑下滑的(de)動畫。

思路

1.在(zai)video標簽上(shang)添(tian)加時(shi)間監聽(ting)。 2.如果1無法(fa)成功，就在(zai)video上(shang)面(mian)(mian)罩(zhao)(zhao)一層 cover-view，在(zai)cover-view上(shang)添(tian)加時(shi)間監聽(ting)。 3.如果上(shang)面(mian)(mian)兩(liang)種方法(fa)都不行(xing)(xing)，用(yong)(yong)小程序的onPageScroll頁面(mian)(mian)處理函數來監聽(ting)頁面(mian)(mian)的滾動。 4.上(shang)述三種方法(fa)都不行(xing)(xing)的話，用(yong)(yong)canvas在(zai)video上(shang)面(mian)(mian)罩(zhao)(zhao)一層，監聽(ting)滾動事件(jian)。

嘗試

現在video標簽上(shang)添加了觸摸(mo)事件的監聽，但是(shi)無(wu)法成功(gong)監聽到觸摸(mo)事件。 因為(wei)video 是(shi)原(yuan)生組件，層(ceng)級(ji)較高(gao)，所以嘗試在上(shang)面罩一層(ceng)cover-view，并監聽滾(gun)動事件，但是(shi)同樣(yang)無(wu)法監聽。

前面(mian)兩(liang)種方(fang)法不行(xing)，我就采(cai)用(yong)了onPageScroll來(lai)監聽頁面(mian)是否發生滾動。這個方(fang)法會(hui)拿到當前頁面(mian)在垂直(zhi)方(fang)向已(yi)滾動的距(ju)離。scrollindex用(yong)來(lai)控制滾動，totalNum是滾動的總數，部分代碼(ma)如下

在(zai)ios上可以滿足需(xu)求，能(neng)上下滾動，也能(neng)加上動畫，但(dan)是在(zai)安卓上卻不能(neng)動，嘗試(shi)著在(zai)頁面json文件中配(pei)置滾動相關，但(dan)都(dou)沒辦(ban)法，所以這個方法也不行(xing)了(le)。

最后(hou)只有canvas這一個(ge)辦法了，在video組件上(shang)面定位一個(ge)canvas，在上(shang)面添加時間監聽(ting)，這是發現成功了，可以在控制(zhi)臺看到打印出來的(de)監聽(ting) console。

實現

wxml：下(xia)面是wxml代(dai)碼，主(zhu)要(yao)思路就是讓(rang)video寬高等(deng)于屏幕，點贊評論分(fen)享(xiang)等(deng)功能，用cover-view定位(wei)到(dao)視頻上方，在將canvas定位(wei)到(dao)video上面滾(gun)動(dong)(dong)時滾(gun)動(dong)(dong)的是封面圖案，video標簽只有一(yi)個，滾(gun)動(dong)(dong)更改video的src。

wxss:都是一些定位相關的(de)(de)樣式沒有特殊的(de)(de)樣式就不(bu)(bu)貼圖了。不(bu)(bu)過(guo)做的(de)(de)時候(hou)這里(li)有個坑，產品希望添(tian)加無限的(de)(de)向(xiang)下滑動視頻，可(ke)以無限加載，所以最開始我才用(yong)(yong)的(de)(de)是animation動畫，對每(mei)一屏根據手指(zhi)向(xiang)上(shang)或者(zhe)向(xiang)下添(tian)加動畫，這樣做的(de)(de)話就無法做到，后來發現可(ke)以使(shi)用(yong)(yong)小程序的(de)(de)api，wx.createAnimation()在(zai)js中實現。

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

需要監(jian)聽(ting)的滾動(dong)事件

js主要做的(de)(de)是(shi)判斷(duan)滾動方向，給(gei)wxml通過微信提供的(de)(de)animation方法來動態(tai)添(tian)加動畫，這樣就(jiu)可以實現無(wu)限加載的(de)(de)需求(qiu)了(le)。scrollTop的(de)(de)作用(yong)是(shi)用(yong)來調整video標簽(qian)位置，因為現在滾動的(de)(de)時候添(tian)加滾動的(de)(de)事(shi)視頻的(de)(de)封面(mian)圖不(bu)是(shi)視頻本身，需要隱(yin)藏視頻，假如用(yong)wx:if；哎控制的(de)(de)話，會導致視頻隱(yin)藏在展(zhan)現之后無(wu)法監聽(ting)之前(qian)添(tian)加的(de)(de)事(shi)件。

效果

在真機(ji)上(shang)(shang)可(ke)以生(sheng)效，在手(shou)機(ji)上(shang)(shang)錄(lu)了(le)視頻不知道怎(zen)(zen)么(me)傳上(shang)(shang)來(lai)，轉gif也沒找到在mac怎(zen)(zen)么(me)轉。。。

最后

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