uni视频图片轮播封装

1.view代码

<view class="" v-if="swiperList.length>0">
            <!-- <zg-swiper :list="swiperList"></zg-swiper> -->
            <swiper class="swiper" circular indicator-color="#ffffff" indicator-active-color="#00aa7f" :indicator-dots="true" :autoplay="swiperAutoplay" :interval="3000"
                :duration="1500" @change='swiperChange'>
                <swiper-item v-for="(item,index) in swiperList" :index="index" :key="index">
                    <video :id="`video${index}`" style="width: 100%;height:100%" v-if="item.type === 'video'"
                        :videoAutoplay="videoAutoPlay" :enable-progress-gesture="false" :src="item.src"
                        @play="handleVideoPlay" @pause="handleVideoPause" @ended="handleVideoEnd"></video>
                    <image  style="width: 100%;" v-if="item.type === 'image'" :src="item.src"></image>
                </swiper-item>
            </swiper>
        </view>

2.data数据

return {

                videoAutoPlay: false,
                videoIndex: 0,
                swiperAutoplay: true,
                swiperList: [],

}

3.事件处理

            //banner事件
            swiperChange(detail) {
                //切换时要把视频暂停
                uni.createVideoContext("video" + (this.videoIndex)).pause()
                this.videoIndex = detail.detail.current
            },
            handleVideoPlay() {
                this.swiperAutoplay = false
                this.videoAutoPlay = true;
            },
            handleVideoPause() {
                this.swiperAutoplay = true
            },
            handleVideoEnd() {
                this.swiperAutoplay = true;
            },