uniapp实现移动端的视频图片轮播组件

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

https://tt.appc02.com/nesxr6

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

3、使用方法

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

uniapp实现移动端的视频图片轮播组件_第1张图片

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





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/video-swiper下的liuliu-video-mask.vue,liuliu-video-mask.scss是用于非app平台的,/pages/subNVue下的liuliu-video-mask.nvue,liuliu-video-mask.scss是用于app平台的,这两个文件的内容是一模一样的,为了兼容全平台,才这样做的。

你可能感兴趣的:(uni-app,视频图片轮播)