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

server/2024/9/23 18:50:00/

简介(下载地址)

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/server/32411.html

相关文章

Spring Boot与OpenCV:融合机器学习的智能图像与视频处理平台

&#x1f9d1; 作者简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟&#xff0c;欢迎关注。提供嵌入式方向…

游戏新手村22:游戏营销推广实例

本章的前面几篇重点讲了广告&#xff0c;本篇将通过实例的方式来讲述一款游戏产品&#xff08;以端游为例&#xff0c;假定为《盗墓笔记》&#xff09;是如何来进行营销推广的。 一般来讲&#xff0c;游戏上市营销计划需要先确定以下几方面的内容&#xff1a; 目标用户&#x…

QT httpServer多线程后台服务器的例子实现

1.需求 1.1 用户需要其他平台&#xff08;web端&#xff09;调用Qt平台的接口&#xff0c;获取想要的数据并实时显示在网页里&#xff0c;比如实时的温湿度&#xff0c;用户数据等 1.2 用户需要在其他平台&#xff08;web端&#xff09;调用Qt平台的接口&#xff0c;下发数据…

安卓手机APP开发__媒体开发部分__分享声音的输入

安卓手机APP开发__媒体开发部分__分享声音的输入 目录 概述 安卓10之前的版本的行为 安卓10的行为 共享场景 小助手普通的APP 有可读取权的服务 普通的APP 两个普通的APP 语音电话 普通的APP 概述 声音的输入通常来自于内嵌的麦克风,还有外置的麦克网,或者是一个…

vue key的原理和作用

1、虚拟dom中key的作用&#xff1a; key是虚拟dom对象的标识&#xff0c;当状态中的数据发生变化时&#xff0c;vue会根据新数据生成新的虚拟DOM&#xff0c;随后vue进行新虚拟dom和旧虚拟dom的差异对比。 2、对比规则&#xff1a; 1&#xff09;旧虚拟dom中找到了与新虚拟dom…

保序加密技术:保护数据有序性的安全方案

在数据安全领域&#xff0c;除了常见的保密性、完整性和可用性需求外&#xff0c;某些特定场景还需要保护数据的有序性。保序加密技术&#xff08;Order Preserving Encryption, OPE&#xff09;就是为了满足这一需求而设计的。本文将介绍保序加密技术的基本原理、应用场景以及…

数据结构––广义表

1.什么是广义表 广义表:由n&#xff08; 0)个表元素组成的有限序列: LS (ao, at, a2...an-&#xff09; LS是广义表的名称 a是广义表的元素&#xff0c;既可以是表(称为子表) 也可以是数据元素(称为原子) n为广义表的长度&#xff08;n0的广义表为空表) 2.广义表的深度和长度 …

腾讯云IM即时通信引入(React Web端组件式)

开发环境要求 React ≥ v18.0 &#xff08;17.x 版本不支持&#xff09; TypeScript node&#xff08;12.13.0 ≤ node 版本 ≤ 17.0.0, 推荐使用 Node.js 官方 LTS 版本 16.17.0&#xff09; npm&#xff08;版本请与 node 版本匹配&#xff09; chat-uikit-react 集成 …