zhuce
/
lilishop-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: ✨ 小程序端兼容video 播放

master
Yer 2023-07-20 15:50:29 +08:00
parent 99079f0b3d
commit b635f91e9f
2 changed files with 35 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
pages/product/goods.vue
View File

@ -51,7 +51,8 @@
:scroll-top="tabScrollTop" @scroll="pageScroll">
<view>
<!-- 轮播图 -->
<GoodsSwiper id="main1" :res="imgList" />
<GoodsSwiper id="main1" :res="imgList" :video="goodsDetail.goodsVideo" />
<!-- 促销活动条 -->
<PromotionAssembleLayout v-if="PromotionList" :detail="goodsDetail" :res="PromotionList" />

36
pages/product/product/goods/-goods-swiper.vue
View File

@ -1,8 +1,24 @@
<template>
<!-- 轮播图 -->
<view class="carousel">
<swiper circular="true" duration="400" @change="swiperChange">
<swiper-item v-if='video'>
<!-- #ifndef APP-PLUS -->
<video class="video" show-mute-btn style="width:100%; height:100%;" muted autoplay :src='video' loop
object-fit="cover"></video>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view style="width:100%; height:100%;">
<!-- <video class="video" show-mute-btn style="width:100%; height:100%;" muted autoplay :src='video' loop
object-fit="cover"></video> -->
<view v-html="html" style="width:100%; height:100%;"></view>
</view>
<!-- #endif -->
</swiper-item>
<swiper-item class="swiper-item" v-for="(item, index) in res" :key="index">
<view class="image-wrapper">
<u-image :src="item" mode="aspectFit" class="loaded" width="100%" height="100%">
<u-loading slot="loading"></u-loading>
@ -10,7 +26,7 @@
</view>
</swiper-item>
</swiper>
<view class="swiper-dots">{{ current }}/{{ res.length }}</view>
<view class="swiper-dots">{{ current }}/{{ video ? res.length + 1 : res.length }}</view>
</view>
</template>
<script>
@ -18,15 +34,24 @@ export default {
data() {
return {
current: 1,
html: ""
};
},
props: ["res"],
props: ["res", 'video'],
watch: {
video(val) {
this.html = '<video muted="muted" ref="videoPlay" style="width:100%; height:100%;" src=' + val + ' page-gesture show-mute-btn autoplay webkit-playsinline="" playsinline="" ></video>'
}
},
methods: {
// 轮播图对应的dot
swiperChange(e) {
this.current = e.detail.current + 1;
},
},
mounted() {
console.log(this.video)
}
};
</script>
<style lang="scss" scoped>
@ -82,4 +107,9 @@ export default {
/deep/ .image-wrapper image {
opacity: 1 !important;
}
</style>
.video {
width: 100%;
height: 100%;
}
</style>