swiper

2022-11-05 19:47| 来源: 网络整理| 查看: 265

更新记录 1.1.3（2022-06-24）

fix

1.1.2（2022-06-24）

修复bug

查看更多平台兼容性 Vue2 Vue3 √ × App 快应用微信小程序支付宝小程序百度小程序字节小程序 QQ小程序 HBuilderX 3.1.0 app-nvue × √ × × × × 钉钉小程序快手小程序飞书小程序京东小程序 × × × × H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari × × × × √ × √ × × swiper-video-image 视频/图片轮播

视频/图片轮播组件 ---关于兼容性我自己试了nvue、微信小程序和H5没问题。

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

基本用法

在 template 中使用组件

export default { data() { return { list: [ { type: 'video', link: 'https://cdn.uviewui.com/uview/resources/video.mp4' }, { type: 'img', link: 'https://cdn.uviewui.com/uview/swiper/swiper1.png' }, { type: 'img', link: 'https://cdn.uviewui.com/uview/swiper/swiper2.png' } ] }; }, methods: { // swiper切换时触发的回调 swiperChange(index) { console.log(index) }, // 点击当前视频或图片的回调 swiperClick(e, index) { console.log(e, index) }, // 暂停当前视频播放 pause() { this.$refs.swiperVideoImage.pause() }, // 播放当前视频 play() { this.$refs.swiperVideoImage.play() } } }; API Calendar Props 属性名类型默认值说明 list Array - 图片/视频列表 width String 690rpx 显示视频/图片的宽度 height String 260rpx 显示视频/图片的高度 linkName String link url字段 typeName String type 判断视频或者图片的字段 videoValue String/Number video 判断视频的值 imgvalue String/Number img 判断图片的值 autoplay Boolean false swiper是否自动切换 circular Boolean false swiper是否采用衔接滑动，即播放到末尾后重新回到开头 autoPlayVideo Boolean false swiper切换到视频是是否自动播放视频 interval Number 3500 swiper自动切换时间间隔 Calendar Events 事件名说明返回值 swiperClick 点击swiper时触 swiperChange swiper切换时触发

【本文地址】

公司简介

联系我们