閱讀(4.6k) 書簽贊(0) 我要糾錯(cuò)

微信小程序擴(kuò)展組件·視頻滑動(dòng)切換組件

2020-07-28 09:56 更新

video-swiper

視頻滑動(dòng)切換組件，可實(shí)現(xiàn)類似微視無限視頻列表效果。

使用說明

video-list 的長(zhǎng)度應(yīng)當(dāng)不低于 3 個(gè)，當(dāng)滾動(dòng)到首項(xiàng)或者尾項(xiàng)后，會(huì)進(jìn)入循環(huán)。通過 setData 更改 video-list，會(huì)直接追加到之前的視頻源中?？杀O(jiān)聽 bindchange 事件獲取當(dāng)前滾動(dòng)到那一個(gè)視頻，activeId 為視頻源的唯一 id。

屬性列表

屬性	類型	默認(rèn)值	必填	說明
duration	number	500	否	滑動(dòng)動(dòng)畫時(shí)長(zhǎng)
easing-function	string	default	否	切換緩動(dòng)動(dòng)畫類型
loop	boolean	true	否	是否循環(huán)播放
video-list	Array VideoSwiperItem	[]	true	視頻源
bindchange	eventhandle	否		滑動(dòng)切換完成時(shí)觸發(fā), e.detail={activeId}
bindplay	eventhandle	否		開始/繼續(xù)播放時(shí)觸發(fā), e.detail={activeId}
bindpause	eventhandle	否		暫停播放時(shí)觸發(fā), e.detail={activeId}
bindended	eventhandle	否		播放到末尾時(shí)觸發(fā), e.detail={activeId}
bindtimeupdate	eventhandle	否		播放進(jìn)度變化時(shí)觸發(fā)，event.detail = {currentTime, duration, activeId}
bindwaiting	eventhandle	否		視頻出現(xiàn)緩沖時(shí)觸發(fā), e.detail={activeId}
binderror	eventhandle	否		視頻播放出錯(cuò)時(shí)觸發(fā), e.detail={activeId}
bindprogress	eventhandle	否		加載進(jìn)度變化時(shí)觸發(fā)，只支持一段加載。event.detail={buffered, activeId}
bindloadedmetadata	eventhandle	否		視頻元數(shù)據(jù)加載完成時(shí)觸發(fā)。event.detail={width, height, duration, activeId}

VideoSwiperItem 屬性列表

屬性	說明
id	每個(gè)視頻源的唯一 id
url	視頻播放地址
objectFit	當(dāng)視頻大小與 video 容器大小不一致時(shí)，視頻的表現(xiàn)形式

objectFit 的合法值

屬性	說明
contain	包含
fill	填充
cover	覆蓋

easing-function 的合法值

屬性	說明
default	默認(rèn)緩動(dòng)函數(shù)
linear	線性動(dòng)畫
easeInCubic	緩入動(dòng)畫
easeOutCubic	緩出動(dòng)畫
easeInOutCubic	緩入緩出動(dòng)畫

以上內(nèi)容是否對(duì)您有幫助：

← 微信小程序擴(kuò)展組件·仿微信表情組件

微信小程序擴(kuò)展組件·小程序長(zhǎng)列表組件 →

寫筆記

我要補(bǔ)充

微信小程序 擴(kuò)展組件·視頻滑動(dòng)切換組件