leave-unused/components/swipers/swiper-pu.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>