郑州公司网站制作,网站开发维护关键技术,网络规划设计师培训哪个好,wordpress界面英文1、视频轮播组件app体验地址
https://tt.appc02.com/nesxr6
2、支持小程序、H5、APP#xff0c;在小程序上运行的效果图 3、使用方法
第一步#xff0c;按照截图步骤配置好 第二步#xff1a;参考以下代码#xff0c;使用视频图片轮播组件
templateview在小程序上运行的效果图 3、使用方法
第一步按照截图步骤配置好 第二步参考以下代码使用视频图片轮播组件
templateviewview我是标题/viewview classperson-headvideo-swiper :ad-listlist4 :ad-height300 :ad-radius20 handleAdClickhandleAdClick/video-swiper/viewview classperson-body iddemo我是内容/view/view
/templatescriptimport videoSwiper from ../../components/liuliu-video-swiper/liuliu-video-swiper.vueexport default {components: {videoSwiper,},data() {return {title: Hello,list4: [{url: https://img0.baidu.com/it/u1435639120,2241364006fm253fmtautoapp138fJPEG?w800h500,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/u1435639120,2241364006fm253fmtautoapp138fJPEG?w800h500,isVideo: false,},],}},methods: {handleAdClick(position) {console.log(handleAdClick position)}},}
/scriptstyle scoped langscss.person-head {position: relative;background-color: #fff;margin-left: 20rpx;margin-right: 20rpx;}
/style
3、组件属性说明
ad-list广告的数据。数组形式每个item需要包含url、isVideo字段url表示图片的路径isVideo表示是否是视频ad-height广告组件的高度单位rpxad-radius广告组件的圆角单位rpxhandleAdClick广告的点击事件
4、如果需要修改组件的样式或者逻辑或者增加属性可自行修改。 比如需要修改轮播图的指示器的样式可以修改liuliu-video-mask.nvueliuliu-video-mask.scss中的代码。其中/components/video-swiper下的liuliu-video-mask.vueliuliu-video-mask.scss是用于非app平台的/pages/subNVue下的liuliu-video-mask.nvueliuliu-video-mask.scss是用于app平台的这两个文件的内容是一模一样的为了兼容全平台才这样做的。
