scroll-video
uniapp仿抖音視頻滑動效果
重要說明
插件分別用swiper實現(多端)和css3動畫實現(只支持app,強烈推薦),可自行切換。愛掏網 - it200.com
插件在uni-app編譯模式下編寫。愛掏網 - it200.com
默認為weex編譯模式,在 manifest.json 的源碼視圖里配置是切換模式, manifest.json -> app-plus -> nvueCompiler 切換編譯模式。愛掏網 - it200.com
功能說明
ccs3:上下切換視頻,左右查看看詳情,weex-bindingx優化動畫,無限加載,點擊暫停,僅支持安卓和ios
swpier: 上下切換視頻,多端兼容
css3參數說明
參數
類型
默認值
說明
typeX
Boolean
false
是否開啟左右滑動
playCount
Number
2
剩余多少視頻加載視頻列表
startDistance
Number
5
開啟左右滑動時有效,判斷左右上下拖動的啟動距離 px
minTime
Number
300
判斷為快速滑動的時間,該時間內無視回彈 ms
backDistance
Number
200
上下滑動的回彈距離 px
1.0.0更新內容
1.視頻滑動效果
2.視頻滑動后自動播放和暫停功能
3.點擊暫停與播放
4.視頻拖動效果
5.解決iostouch無效
6.點贊功能
1.1.0更新內容
1.更改uni-app編譯模式下使用swiper組件實現。愛掏網 - it200.com
1.2.0更新內容
1.新增css3實現效果
2.css3支持點擊播放和暫停功能
3.移除swiper中點擊視頻播放和暫停事件,盡量減少swiper中的事件
4.index索引首視頻設置為自動播放
5.新增進度條
6.修復h5多個視頻播放問題
1.3.0更新內容
1.css3: 引入BindingX優化拖動性能
2.修復進度條
3.優化css3樣式
4.css3新增無限加載
1.4.0更新內容
1.swiper:修復下滑不靈敏的bug
2.css3:新增參數說明,新增左右滑動查看詳情
3.video組件新增上下邊框陰影
如果覺得插件不錯,麻煩給個好評