uniapp自定义轮播图swiper-dot轮播图指示点样式自定义

<template>
	<view>
		<view class="container">
			<!-- 轮播图-->
			<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" :current="swiperCurrent"
				@change="changeSwiper">
				<swiper-item v-for="item in swiperImg" :key="item.id">
					<image class="swiper-item" :src="item" mode="widthFix"></image>
				</swiper-item>
			</swiper>
			<!-- 轮播指示点样式修改 -->
			<view class="dots">
				<block v-for="(item,index) in swiperImg.length" :key="item">
					<view class="dot" :class="index==swiperCurrent ? ' active' : ''"></view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperImg: [
					'https://img.yzcdn.cn/vant/cat.jpeg',
					'https://gtd.alicdn.com/sns_logo/i1/TB124_3NXXXXXasXVXXSutbFXXX.jpg_240x240xz.jpg',
					'https://cdn.uviewui.com/uview/common/logo.png'
				],
				current: 0,
				swiperCurrent: 0,
			}
		},
		onLoad() {

		},
		methods: {
			changeSwiper(e) {
				this.swiperCurrent = e.detail.current;
			}

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;

		.swiper {
			width: 700rpx;
			height: 240rpx;
			border-radius: 16rpx;
			overflow: hidden;
			margin-top: 16rpx;
			position: relative;
			margin-left: 26rpx;

			.swiper-item {
				width: 700rpx;
				height: 240rpx;
				border-radius: 16rpx;
			}

		}

		.dots {
			position: absolute;
			bottom: 20rpx;
			left: 50%;
			// 这里一定要注意兼容不然很可能踩坑          
			transform: translate(-50%, 0);
			-webkit-transform: translate(-50%, 0);
			z-index: 99;
			display: flex;
			flex-direction: row;
			justify-content: center;

			.dot {
				width: 24rpx;
				height: 8rpx;
				transition: all .6s;
				background: rgba(0, 0, 0, .3);
				margin-right: 10rpx;

			}

			.active {
				width: 24rpx;
				height: 8rpx;
				background: rgba(255, 255, 255, .8);
			}
		}
	}
</style>