更新记录

1.1.3（2022-06-24）

fix

1.1.2（2022-06-24）

修复bug

1.1.1（2022-06-20）

更新文档

平台兼容性

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

Calendar Events