uniapp实现移动端的视频图片轮播组件-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp实现移动端的视频图片轮播组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、视频轮播组件app体验地址

https://tt.appc02.com/nesxr6

2、支持小程序、H5、APP，在小程序上运行的效果图

3、使用方法

第一步，按照截图步骤配置好

uniapp实现移动端的视频图片轮播组件,uni-app,视频图片轮播

"app-plus": {
					"subNVues": [{
						"id": "videoMask", // 唯一标识  
						"path": "components/liuliu-video-swiper/subnvue/liuliu-video-mask",
						"style": {
							"position": "absolute",
							"background": "transparent"
						}
					}]
				}

第二步：参考以下代码，使用视频图片轮播组件

<template>
	<view>
		<view>
			我是标题
		</view>
		<view class="person-head">
			<video-swiper :ad-list="list4" :ad-height="300" :ad-radius="20" @handleAdClick="handleAdClick"></video-swiper>
		</view>
		<view class="person-body" id="demo">
			我是内容
		</view>
	</view>
</template>

<script>
	import videoSwiper from '../../components/liuliu-video-swiper/liuliu-video-swiper.vue'
	export default {
		components: {
			videoSwiper,
		},
		data() {
			return {
				title: 'Hello',
				list4: [{
						url: 'https://img0.baidu.com/it/u=1435639120,2241364006&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
						isVideo: false,
					}, {
						url: 'https://www.w3school.com.cn/example/html5/mov_bbb.mp4',
						isVideo: true,
					}, {
						url: 'https://www.w3schools.com/html/movie.mp4',
						isVideo: true,
					},
					{
						url: 'https://img0.baidu.com/it/u=1435639120,2241364006&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
						isVideo: false,
					},
				],
			}
		},
		methods: {
			handleAdClick(position) {
				console.log('handleAdClick ' + position)
			}
		},
	}
</script>

<style scoped lang="scss">
	.person-head {
		position: relative;
		background-color: #fff;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}
</style>

3、组件属性说明

ad-list	广告的数据。数组形式，每个item需要包含url、isVideo字段，url表示图片的路径，isVideo表示是否是视频
ad-height	广告组件的高度，单位rpx
ad-radius	广告组件的圆角，单位rpx
handleAdClick	广告的点击事件

4、如果需要修改组件的样式或者逻辑或者增加属性，可自行修改。

比如需要修改轮播图的指示器的样式，可以修改liuliu-video-mask.nvue，liuliu-video-mask.scss中的代码。其中/components/liuliu-video-swiper下的liuliu-video-mask.vue，liuliu-video-mask.scss是用于非app平台的，/components/liuliu-video-swiper/subnvue下的liuliu-video-mask.nvue，liuliu-video-mask.scss是用于app平台的，这两个文件的内容是一模一样的，为了兼容全平台，才这样做的。

5、插件下载地址

支持圆角的视频图片轮播组件 - DCloud 插件市场文章来源地址https://www.toymoban.com/news/detail-690395.html

到了这里，关于uniapp实现移动端的视频图片轮播组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！