更新记录
1.1.3(2022-06-24) 下载此版本
fix
1.1.2(2022-06-24) 下载此版本
修复bug
1.1.1(2022-06-20) 下载此版本
更新文档
查看更多平台兼容性
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
中使用组件
<swiper-video-image
:list="list"
autoplay
circular
autoPlayVideo
ref="swiperVideoImage"
@swiperClick="swiperClick"
@swiperChange="swiperChange"
></swiper-video-image>
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切换时触发 |