mall-laonong/components/swipers/swiper-pu.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>