自定义指示点组件

// swiperDot.vue

<template>
	<view class="dot-main">
		<view :class="['dot-item',current==index?'active':'']" v-for="(item,index) in list" :key="index"></view>
	</view>
</template>
<style>
	.dot-main {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.dot-item {
		width: 10.41rpx;
		height: 10.41rpx;
		border-radius: 50%;
		background-color: rgba(255,255,255,0.5);
		margin: 0 6upx;
		box-sizing: border-box;
	}
	.active {
		border-radius: 33.33rpx;
		width: 25rpx;
		background-color: #FFFFFF;
	}
</style>
<script>
	export default {
		props: [ 'list','current'],
		data() {
			return {
				
			};
		}
	}
</script>

使用方式：

<template>
	<view class="content">
		<swiper class="swiper-box" @change="change">
			<swiper-item v-for="(item, index) in list" :key="index">
				<view class="swiper-item">{{ item.content }}</view>
			</swiper-item>
		</swiper>
		<swiper-dot class="dot" :current="current" :list="list"></swiper-dot>
	</view>
</template>

<script>
import swiperDot from '@/components/swiperDot/swiperDot.vue';
export default {
	components: { swiperDot },
	data() {
		return {
			list: [
				{
					content: '内容 A'
				},
				{
					content: '内容 B'
				},
				{
					content: '内容 C'
				}
			],
			current: 0
		};
	},
	onLoad() {},
	methods: {
		change(e) {
			this.current = e.detail.current;
		}
	}
};
</script>

<style>
.content {
	position: relative;
}
.dot {
	position: absolute;
	bottom: 10px;
	right: 10px;
}
.swiper-box {
	background-color: #808080;
	width: 750rpx;
	height: 300rpx;
}
</style>

Tips:

• 指示点的样式可以根据自己需求修改
• swiper-item 尽量控制在一定数量之内，否则指示点可能会超出屏幕