uniapp 短视频浏览组件（仿抖音、上滑下滑）组件 Ba-VideoSView

简介（下载地址）

Ba-VideoSView 是一款uniapp短视频上划浏览组件，支持无限滑动加载，支持自定义界面（功能遮罩）,支持点播、直播。

• 支持无限滑动加载
• 支持自定义界面（遮罩）
• 支持监听上滑下滑动事件
• 支持点播、直播
• 可以实现全屏（“navigationStyle”: “custom”）

截图展示

---

也可关注博客，实时更新最新插件：

uniapp 常用原生插件大全

---

使用方法

在 template 中直接引用

		<Ba-VideoSView ref="videoSView" class="video-view" :load="loadData">
		</Ba-VideoSView>

在 script 中调用

	export default {
		data() {
			return {
				loadData: {//配置
					list: [{
							"coverImgUrl": "",//封面图片
							"title": "",//标题
							"videoDownloadUrl": ""//视频地址
							//其他参数可自定义
						}
					]//短视频列表数据
				}
			}
		},
		onReady() {
			this.setListener();//设置监听
		},
		methods: {
			setListener() {
				this.$refs.videoSView.setListener((res) => {
					if (res.action == "onPageSelected") {//滑动事件
						if (res.slide == "up") { //向上滑动
							this.showToast(JSON.stringify(res))
							if (res.position == res.size - 2) { //倒数第二个开始加载更多（demo逻辑，可自行更改）
								this.$refs.videoSView.addData({
									list: this.loadData.list
								}, (res => {

								}));
							}
						}
					}
				})
			}
		}
	}

load 配置参数（初始加载）

属性名	类型	必填	说明
list	Array	true	视频列表数据

list 参数

属性名	类型	必填	说明
coverImgUrl	String	true	封面图片地址
title	String	true	标题
videoDownloadUrl	String	true	视频地址

setListener 监听事件方法

设置组件监听，可监听滑动浏览事件（上滑、下滑）

返回参数

属性名	类型	说明
action	String	时间名称，如：‘onPageSelected’是视频滑动事件（上滑、下滑 ）
slide	String	up：向上滑、down：向下滑
position	Number	当前位置
size	Number	短视频总数

注意：可自行根据返回参数写处理逻辑（如：最后几个视频时，加载下一页数据）

addData 方法（添加数据）

添加数据

参数

属性名	类型	必填	说明
list	Array	true	视频列表数据

自定义界面（遮罩）

参照示例，nvue写法，有疑问可联系作者