uniapp 短视频浏览组件（仿抖音、上滑下滑）组件 Ba-VideoSView_uniapp 好用的视频播放组件

简介（下载地址）

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

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

截图展示

---

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

uniapp 常用原生插件大全

---

使用方法

在 template 中直接引用

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

在 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 => {

								}));
							}
						}
					}
				})
			}
		}
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

load 配置参数（初始加载）

list 参数

setListener 监听事件方法

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

返回参数

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

addData 方法（添加数据）

添加数据

参数

自定义界面（遮罩）

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