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

news/2024/9/23 17:27:57/

简介(下载地址)

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 配置参数(初始加载)

属性名类型必填说明
listArraytrue视频列表数据
list 参数
属性名类型必填说明
coverImgUrlStringtrue封面图片地址
titleStringtrue标题
videoDownloadUrlStringtrue视频地址

setListener 监听事件方法

设置组件监听,可监听滑动浏览事件(上滑、下滑)

返回参数
属性名类型说明
actionString时间名称,如:‘onPageSelected’是视频滑动事件(上滑、下滑 )
slideStringup:向上滑、down:向下滑
positionNumber当前位置
sizeNumber短视频总数

注意:可自行根据返回参数写处理逻辑(如:最后几个视频时,加载下一页数据)

addData 方法(添加数据)

添加数据

参数
属性名类型必填说明
listArraytrue视频列表数据

自定义界面(遮罩)

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


http://www.ppmy.cn/news/1452267.html

相关文章

AVEVA Everything3D 插件开发 一

第一次接触&#xff0c;学习 AVEVA这个&#xff0c;很多方面很不熟悉&#xff0c;资料又少。 效果图 搞了两天&#xff0c;走过一些自己给自己挖的坑 1、窗体管理和命令行管理&#xff0c;定义写到静态变量里面&#xff0c;单例模式调用&#xff0c;后期使用会失败&#xff…

22 重构系统升级-实现不停服的数据迁移和用户切量

专栏的前 21 讲&#xff0c;从读、写以及扣减的角度介绍了三种特点各异的微服务的构建技巧&#xff0c;最后从微服务的共性问题出发&#xff0c;介绍了这些共性问题的应对技巧。 在实际工作中&#xff0c;你就可以参考本专栏介绍的技巧构建新的微服务&#xff0c;架构一个具备…

pytorch中创建maskrcnn模型

0.模型输入/输出参数参见 链接: pytorch的mask-rcnn的模型参数解释 核心代码 GeneralizedRCNN(这里以mask-rcnn来解释说明) # 通过输入图像获取fpn特征图,注意这里的backbone不是直接的resnet,而是fpn化后的 features self.backbone(images.tensors) # 由于是mask-rcnn,故而…

Dockerfile实战(SSH、Systemctl、Nginx、Tomcat)

目录 一、构建SSH镜像 1.1 dockerfile文件内容 1.2 生成镜像 1.3 启动容器并修改root密码 二、构建Systemctl镜像 2.1 编辑dockerfile文件 ​编辑2.2 生成镜像 2.3 启动容器&#xff0c;并挂载宿主机目录挂载到容器中&#xff0c;然后进行初始化 2.4 进入容器验证 三、…

神经网络基础(Neural net foundations)

Today we’ll be learning about the mathematical foundations of deep learning: Stochastic gradient descent (SGD), and the flexibility of linear functions layered with non-linear activation functions. We’ll be focussing particularly on a popular combination…

vue+element-ui实现横向长箭头,横向线上下可自定义文字(使用after伪元素实现箭头)

项目场景&#xff1a; 需要实现一个长箭头&#xff0c;横向线上下可自定义文字 代码描述 <div><span class"data-model">{{ //上方文字}}</span><el-divider class"q"> </el-divider>//分隔线<span class"data-mod…

牛客NC275 和为S的两个数字【简单 map C++/Java/Go/PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/390da4f7a00f44bea7c2f3d19491311b 思路 map参考答案C #include <vector> class Solution {public:vector<int> FindNumbersWithSum(vector<int> array, int sum) {vector<int> ans;m…

【JavaWeb】Day62.SpringBootWeb案例——基础登录功能

登录功能 需求 在登录界面中&#xff0c;我们可以输入用户的用户名以及密码&#xff0c;然后点击 "登录" 按钮就要请求服务器&#xff0c;服务端判断用户输入的用户名或者密码是否正确。如果正确&#xff0c;则返回成功结果&#xff0c;前端跳转至系统首页面。 接…