111 lines
3.1 KiB
Vue
111 lines
3.1 KiB
Vue
<template>
|
|
<view>
|
|
<view v-if="isDot" class="banner-box">
|
|
<swiper :current="bcurrent" @change="changeBanner" :style="{height: newHeight+'px'}" :autoplay="true" :circular="true" :interval="3000" :duration="500">
|
|
<swiper-item v-for="(item,index) in bannerList" :key="index">
|
|
<view @tap="chooseImg(index)" class="posir">
|
|
<image :style="{borderRadius:newRadius+'px',height:newHeight+'px'}" class="img" :src="item.imgSrc" mode="aspectFill"></image>
|
|
<image @tap.stop="playVideo(index)" v-if="item.isVideo" class="posia" style="top: 50%;left: 50%;transform: translate(-50%,-50%);width: 126rpx;height: 126rpx;z-index: 1;" src="/static/public/video.png" mode=""></image>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
<!-- 指示点 -->
|
|
<view class="dot-box" :style="{bottom:newBottom+'px'}">
|
|
<view :class="bcurrent==indexd ? 'dotActive' : 'dotMo'" v-for="(itemd,indexd) in bannerList.length" :key="indexd"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name:"swiper-pu",
|
|
props:{
|
|
isDot:{//是否显示指示点
|
|
type:Boolean,
|
|
default:true
|
|
},
|
|
bannerList:{//默认轮播图片
|
|
type:Array,
|
|
default:function(){
|
|
return [
|
|
{imgSrc:'/static/public/banner.png',url:'',isVideo:false,poster:''},
|
|
{imgSrc:'/static/public/banner.png',url:'',isVideo:false,poster:''},
|
|
]
|
|
}
|
|
},
|
|
newHeight:{//swiper的高
|
|
type:String,
|
|
default:'200'
|
|
},
|
|
newWidth:{//swiper和图片的宽
|
|
type:String,
|
|
default:'100%'
|
|
},
|
|
newBottom:{//指示点距离底部位置
|
|
type:String,
|
|
default:'18'
|
|
},
|
|
newRadius:{//图片圆角
|
|
type:String,
|
|
default:'0'
|
|
},
|
|
browseP:{
|
|
type:Boolean,
|
|
default:false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
bcurrent:0,
|
|
isShowVideo:false,
|
|
autoplay:false,
|
|
};
|
|
},
|
|
methods:{
|
|
chooseImg(index){
|
|
// console.log('当前banner图',index);
|
|
this.bcurrent = index
|
|
if(this.browseP){
|
|
let imgList = []
|
|
this.bannerList.forEach(item=>{
|
|
let nurl = ''
|
|
item.url=='' ? nurl = item.imgSrc : nurl = item.url
|
|
let obj = {
|
|
url:nurl,
|
|
type:item.isVideo?'video':'image',
|
|
poster:item.poster
|
|
}
|
|
imgList.push(obj)
|
|
})
|
|
uni.previewMedia({
|
|
current:this.bcurrent,
|
|
sources:imgList
|
|
})
|
|
} else {
|
|
uni.navigateTo({
|
|
url:this.bannerList[index].url
|
|
})
|
|
}
|
|
},
|
|
changeBanner(e){
|
|
this.bcurrent = e.detail.current//当前的指示点下标
|
|
},
|
|
playVideo(index){
|
|
// console.log('播放视频');
|
|
uni.navigateTo({
|
|
url:`/pagesB/video/playVideo?src=${this.bannerList[index].url}&posterSrc=${this.bannerList[index].poster}`
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.banner-box{position: relative;}
|
|
.img{width:100%;}
|
|
.dot-box{position: absolute;bottom: 36rpx;display: flex;justify-content: center;width: 100%;}
|
|
.dotActive{width: 22rpx;height: 12rpx;margin-right: 10rpx;border-radius: 20rpx; background-color: rgba(56, 117, 246, 1);}
|
|
.dotMo{width: 12rpx;height: 12rpx;margin-right: 10rpx;border-radius: 100%;background-color: rgba(191, 191, 191, 1);}
|
|
</style>
|