uniapp中app端视频、图片混合轮播
·
使用插件视频(video)、图片混合轮播 - DCloud 插件市场
因为只需要兼容app端,修改fuyu-MixSwiper文件部分代码
<template>
<swiper class="swiper" circular :autoplay="autoplaySwiper" :current="swiperCurrent" @change="swiperChange">
<swiper-item v-for="(item,index) in list" :key="index">
<image class="swiper-image" v-if="isImageUrl(item.url)" :src="item.url" mode="scaleToFill" lazy-load />
<div style="height: 100%;width: 100%;position: relative;" v-else>
<!-- #ifdef APP -->
<MyVideo :item="item" :isPlay="!isShow && videoId == item.id" @onEnded="endVideo(item.id)" />
<!-- #endif -->
</div>
</swiper-item>
</swiper>
</template>
MyVideo.vue文件initVideoHtml方法里innerHtml里video标签添加controls属性
initVideoHtml() {
let { url } = this.item
let bool = this.isHttpOrHttps(url)
if(!bool) {
url = plus.io.convertLocalFileSystemURL(url);
}
this.innerHtml = `<video class="swiper-video" id="Video${this.item.id}" src="${url}" width="100%" height="100%" style="object-fit: contain;" controls autoplay/>`;
},
更多推荐


所有评论(0)