181 lines
4.3 KiB
Vue
181 lines
4.3 KiB
Vue
<template>
|
|
<view class="swiper_s">
|
|
<swiper class="swiper_s" :autoplay="false" indicator-active-color="#0DAE11" indicator-color="#ffffff" :indicator-dots="false" :current="swiperCurrent" @change="swiperChange">
|
|
<swiper-item v-for="(item,index) in list" :key="index">
|
|
<view class="fnon_tit">
|
|
<view class="text">{{ item.title?item.title:'' }}</view>
|
|
</view>
|
|
<!-- @click="click(item.url)" 跳转活动链接 -->
|
|
<image class="swiper-image" v-if="isImageUrl(item.image)" :src="item.image" mode="scaleToFill" />
|
|
</swiper-item>
|
|
|
|
</swiper>
|
|
<!-- 自定义指示器 -->
|
|
<view class="dots">
|
|
<text
|
|
v-for="(dot, idx) in list.length"
|
|
:key="idx"
|
|
:class="['dot', { active: swiperCurrent === idx }]"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// #ifdef APP
|
|
import MyVideo from '@/components/fuyu-MixSwiper/MyVideo.vue'
|
|
// #endif
|
|
export default {
|
|
components: {
|
|
// #ifdef APP
|
|
MyVideo
|
|
// #endif
|
|
},
|
|
props: {
|
|
list: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
swiperCurrent: 0, //轮播下标
|
|
autoplaySwiper: false,
|
|
isShow: true,
|
|
videoIndex: null,
|
|
videoId: null,
|
|
dotsShow:true,
|
|
currentItemType:''
|
|
}
|
|
},
|
|
created() {
|
|
|
|
},
|
|
methods: {
|
|
swiperChange(e) {
|
|
this.swiperCurrent = e.detail.current;
|
|
const currentItem = this.list[this.swiperCurrent];
|
|
this.currentItemType = currentItem.showtype;
|
|
if (this.currentItemType === 'video') {
|
|
this.dotsShow = false
|
|
} else {
|
|
this.dotsShow = true
|
|
}
|
|
if (e.detail.current != this.videoIndex) {
|
|
this.endVideo(this.videoId, 'swiper')
|
|
}
|
|
},
|
|
click(e){
|
|
uni.navigateTo({
|
|
url: e
|
|
});
|
|
},
|
|
isImageUrl(url) {
|
|
// 定义常见的图片文件后缀
|
|
const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'svg'];
|
|
// 获取URL中的文件后缀
|
|
const ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
|
|
// 检查文件后缀是否在图片文件后缀数组中
|
|
return imageExtensions.includes(ext)
|
|
},
|
|
//当video播放得时候 覆盖曾隐藏，不能轮播
|
|
plays(id, index) {
|
|
// #ifndef APP
|
|
let videoContext = uni.createVideoContext(`Video${id}`, this);
|
|
videoContext.play()
|
|
// #endif
|
|
this.videoId = id
|
|
this.videoIndex = index
|
|
this.isShow = false
|
|
this.autoplaySwiper = false
|
|
},
|
|
//加载视频时触发，解决小程序加载报错问题
|
|
loadVideo(id) {
|
|
let videoContext = uni.createVideoContext(`Video${id}`, this);
|
|
videoContext.pause()
|
|
videoContext.seek(0)
|
|
},
|
|
//当video播放结束得时候 进行初始化，恢复轮播
|
|
endVideo(id, type) {
|
|
// #ifndef APP
|
|
let videoContext = uni.createVideoContext(`Video${id}`, this);
|
|
videoContext.pause()
|
|
// #endif
|
|
this.isShow = true
|
|
this.videoIndex = null
|
|
this.videoId = null
|
|
this.autoplaySwiper = true
|
|
// if (!type) {
|
|
// setTimeout(v => {
|
|
// this.swiperCurrent++
|
|
// }, 500)
|
|
// }
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.swiper_s {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
.swiper-image,
|
|
.swiper-video {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 36rpx;
|
|
object-fit: contain;
|
|
}
|
|
.fnon_tit {
|
|
position: absolute;
|
|
left: 5%;
|
|
font-family: "YouSheBiaoTiHei";
|
|
font-weight: 400;
|
|
font-size: 38rpx;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
z-index: 1;
|
|
width: 630rpx;
|
|
height: 117rpx;
|
|
line-height: 100rpx;
|
|
background: rgba(0, 0, 0, 0.24);
|
|
border-radius: 36rpx;
|
|
bottom: 30rpx;
|
|
.text {
|
|
position: relative; /* 确保文字在模糊背景之上 */
|
|
z-index: 110; /* 确保文字位于最上层，高于伪元素 */
|
|
}
|
|
}
|
|
.fnon_tit::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
backdrop-filter: blur(4px); /* 调整模糊程度 */
|
|
pointer-events: none; /* 确保模糊效果不会干扰点击事件 */
|
|
border-radius: 36rpx;
|
|
z-index: 10; /* 确保伪元素在背景和文字之间 */
|
|
}
|
|
.dots {
|
|
position: absolute;
|
|
bottom: 50rpx;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.dot {
|
|
background-color: #ffffff ;
|
|
width: 30rpx;
|
|
height: 6rpx;
|
|
border-radius: 0;
|
|
margin-right: 10rpx;
|
|
&.active {
|
|
background: #0DAE11;
|
|
// transform: scale(0.9);
|
|
}
|
|
}
|
|
}
|
|
</style> |