175 lines
3.7 KiB
Vue
175 lines
3.7 KiB
Vue
<template>
|
|
<view class="banner-box">
|
|
<swiper :current="bcurrent" @change="changeBanner" :style="{height: newHeight}" :autoplay="isplay"
|
|
:circular="true" :interval="3000" :duration="500">
|
|
<swiper-item v-for="(item,index) in bannerList" :key="index">
|
|
<view @tap="chooseImg(index,item.url)" class="img-box">
|
|
<image :style="{borderRadius:newRadius,height:newHeight}" class="img animated fadeIn"
|
|
:src="item.imgSrc" mode="widthFix"></image>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
<!-- 指示点 -->
|
|
<view v-if="isDot" class="dot-box" :style="{bottom:newBottom}">
|
|
<view class="item-dot" :style="{backgroundColor: bcurrent==indexd ? activec : defaultc}"
|
|
v-for="(itemd,indexd) in bannerList.length" :key="indexd" @tap="chooseDot(indexd)"></view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "swiper-pu",
|
|
props: {
|
|
isplay: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
isDot: { //是否显示指示点
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
bannerList: { //默认轮播图片
|
|
type: Array,
|
|
default: function() {
|
|
return [{
|
|
imgSrc: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
|
url: '',
|
|
isVideo: false,
|
|
poster: ''
|
|
},
|
|
{
|
|
imgSrc: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
|
url: '',
|
|
isVideo: false,
|
|
poster: ''
|
|
},
|
|
{
|
|
imgSrc: 'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
|
url: '',
|
|
isVideo: false,
|
|
poster: ''
|
|
},
|
|
]
|
|
}
|
|
},
|
|
newHeight: { //swiper的高
|
|
type: String,
|
|
default: '420rpx'
|
|
},
|
|
newBottom: { //指示点距离底部位置
|
|
type: String,
|
|
default: '18px'
|
|
},
|
|
newRadius: { //图片圆角
|
|
type: String,
|
|
default: '0px'
|
|
},
|
|
browseP: { //是否可预览
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
activec: {
|
|
type: String,
|
|
default: 'rgba(255,255,255,1)'
|
|
},
|
|
defaultc: {
|
|
type: String,
|
|
default: 'rgba(255,255,255,.3)'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
bcurrent: 0, // 默认当前选中项
|
|
isShowVideo: false, // 是否显示视频
|
|
autoplay: false, // 是否开启自动轮播
|
|
isVedio: uni.getStorageSync('is_vedio') // 是否是视频
|
|
};
|
|
},
|
|
methods: {
|
|
// 图片点击事件
|
|
chooseImg(index, url) {
|
|
console.log('当前banner图', index, url);
|
|
this.bcurrent = index
|
|
if (this.browseP) {
|
|
let imgList = []
|
|
this.bannerList.forEach(item => {
|
|
let nurl = ''
|
|
let obj = {}
|
|
if (this.isVedio) {
|
|
item.url == '' ? nurl = item.imgSrc : nurl = item.url
|
|
obj = {
|
|
url: nurl,
|
|
type: item.isVideo ? 'video' : 'image',
|
|
poster: item.poster
|
|
}
|
|
} else {
|
|
nurl = item.imgSrc
|
|
obj = {
|
|
url: nurl,
|
|
type: 'image',
|
|
poster: item.poster
|
|
}
|
|
}
|
|
imgList.push(obj)
|
|
})
|
|
// 预览图片和视频
|
|
uni.previewMedia({
|
|
current: this.bcurrent,
|
|
sources: imgList
|
|
})
|
|
}
|
|
if (url) {
|
|
// 有链接，跳转链接
|
|
uni.navigateTo({
|
|
url: `/${url}`
|
|
})
|
|
console.log(`/${url}`, '跳转链接');
|
|
}
|
|
},
|
|
// 切换后获取当前索引
|
|
changeBanner(e) {
|
|
this.bcurrent = e.detail.current //当前的指示点下标
|
|
// console.log(this.bcurrent);
|
|
},
|
|
// 点击当前指示点
|
|
chooseDot(index) {
|
|
this.bcurrent = index;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.banner-box {
|
|
position: relative;
|
|
}
|
|
|
|
.img-box {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.img {
|
|
width: 100%;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.dot-box {
|
|
position: absolute;
|
|
bottom: 36rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.item-dot {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
border-radius: 100%;
|
|
margin: 0 6rpx;
|
|
}
|
|
</style>
|