uni-app中自定义swiper轮播图面板指示点

一、效果图

 二、代码

<template>
	<view>
		<view class="swiper">
			<view class="swiper-box">
				<swiper circular="true" autoplay="true" @change="swiperChange" interval="2000">
					<swiper-item v-for="swiper in swiperList" :key="swiper.id">
						<image :src="swiper.img" @tap="toSwiper(swiper)"></image>
					</swiper-item>
				</swiper>
				<view class="indicator">
					<view
						v-for="(swiper, index) in swiperList"
						:key="index"
                        :style="{
							 width:`${(1/swiperList.length*100)}%`,
							'background-color':currentSwiper === index? '#fff' : 'red',
						}"
					></view>
				</view>
			</view>
		</view>
		<view class="swiper">
			<view class="swiper-box">
				<swiper circular="true" autoplay="true" @change="swiperChange">
					<swiper-item v-for="swiper in swiperList" :key="swiper.id">
						<image :src="swiper.img" @tap="toSwiper(swiper)"></image>
					</swiper-item>
				</swiper>
				<view class="indicator_two">
					<view
						class="dots"
						v-for="(swiper, index) in swiperList"
						:style="currentSwiper >= index ?` width:${(1/swiperList.length*100)}%;` : ''"
						:key="index"
					></view>
				</view>
			</view>
		</view>
		<view class="swiper">
			<view class="swiper-box">
				<swiper circular="true" autoplay="true" vertical="true" @change="swiperChange">
					<swiper-item v-for="swiper in swiperList" :key="swiper.id">
						<image :src="swiper.img" @tap="toSwiper(swiper)"></image>
					</swiper-item>
				</swiper>
				<view class="indicator_three">
					<view class="three_i" v-for="(v,i) in swiperList" :key="i" 
						:style="currentSwiper >= i ?` height:${(1/swiperList.length*100)}%;` : ''"
					></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentSwiper: 0,
			// 轮播图片
			swiperList: [
				{ id: 1, src: 'url1', img: 'https://img2.baidu.com/it/u=1842450460,1583105677&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=208' },
				{ id: 2, src: 'url2', img: 'https://img2.baidu.com/it/u=2579945444,3600776594&fm=253&fmt=auto&app=138&f=JPG?w=1000&h=450' },
				{ id: 3, src: 'url3', img: 'https://img2.baidu.com/it/u=3557928910,3814075248&fm=253&fmt=auto&app=138&f=JPG?w=1295&h=500' },
				{ id: 4, src: 'url4', img: 'https://img0.baidu.com/it/u=2534113487,2188208854&fm=253&fmt=auto&app=138&f=JPEG?w=1778&h=500' },
				{ id: 5, src: 'url5', img: 'https://img2.baidu.com/it/u=2303057820,2935640405&fm=253&fmt=auto&app=138&f=JPEG?w=1597&h=500' },
				{ id: 6, src: 'url6', img: 'https://img0.baidu.com/it/u=2534113487,2188208854&fm=253&fmt=auto&app=138&f=JPEG?w=1778&h=500' },
				{ id: 7, src: 'url7', img: 'https://img0.baidu.com/it/u=2534113487,2188208854&fm=253&fmt=auto&app=138&f=JPEG?w=1778&h=500' },
				{ id: 8, src: 'url8', img: 'https://img0.baidu.com/it/u=2534113487,2188208854&fm=253&fmt=auto&app=138&f=JPEG?w=1778&h=500' },
			],
		};
	},
	methods: {
		//轮播图指示器
		swiperChange(event) {
			console.log('event',event);
			this.currentSwiper = event.detail.current;
		}
	}
};
</script>
<style lang="scss">
.swiper {
	width: 100%;
	margin-top: 10upx;
	display: flex;
	justify-content: center;
	.swiper-box {
		width: 92%;
		height: 30.7vw;
		overflow: hidden;
		border-radius: 15upx;
		box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
		//兼容ios，微信小程序
		position: relative;
		z-index: 1;
		swiper {
			width: 100%;
			height: 30.7vw;
			swiper-item {
				image {
					width: 100%;
					height: 30.7vw;
				}
			}
		}
		.indicator {
			position: absolute;
			bottom: 20upx;
			left: 20upx;
			background-color: rgba(0, 0, 0, 0.4);
			width: 150upx;
			height: 5upx;
			border-radius: 3upx;
			overflow: hidden;
			display: flex;
			.dots {
				width: 0upx;
				background-color: rgba(255, 85, 255, 1.0);
				transition: all 0.3s ease-out;
			}
		}
	}
}
.indicator_two{
	position: absolute;
	bottom: 20upx;
	right: 20upx;
	background-color: rgba(255, 255, 255, 0.4);
	width: 150upx;
	height: 5upx;
	border-radius: 3upx;
	overflow: hidden;
	display: flex;
	.dots {
		width: 0upx;
		background-color: rgba(255, 0, 0, 1.0);
		transition: all 0.3s ease-out;
	}
}
.indicator_three{
	position: absolute;
	bottom: 20upx;
	right: 20upx;
	width: 5rpx;
	height: 150rpx;
	background-color: rgba(255, 255, 255, 0.4);
	.three_i {
		width: 5rpx;
		height: 0rpx;
		background-color: red;
		transition: all 0.3s ease-out;
	}
}
</style>