uniapp轮播图指示点

在标签里面写

<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
			:dots-styles="dotsStyles" field="content">
			<swiper class="swiper-box" @change="change" :current="swiperDotIndex" :autoplay="autoplay"
				:interval="interval" :duration="duration">
				<swiper-item v-for="(item, index) in info" :key="index">
					<view :class="item.colorClass" class="swiper-item">
						<image class="image" :src="item.url" mode="aspectFill" :draggable="false"
							@click="onBanner(index)" />
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>

在data中定义

data() {
			return {
				autoplay: true,
				interval: 4000,  //这个就是轮播图4s自动轮播的
				duration: 500,
				info: [{
						colorClass: 'uni-bg-red',
						url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2Fmn01%2F041619234342%2F1Z416234342-4.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1624600968&t=bec3c77ebb36cb2574ca057e793c11d5',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://pic.netbian.com/uploads/allimg/210517/203529-1621254929d7e6.jpg',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fc%2F5670d1eee0bc7.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1624601185&t=acdbdf14c827047c998b2a6993314012',
						content: '内容 C'
					}
				],
				current: 0,
				mode: 'default'	
			};
		}

方法

			clickItem(e) {
				this.swiperDotIndex = e
			},
			change(e) {
				this.current = e.detail.current
			},
			//轮播图
			onBanner(index) {
				console.log(22222, index);
			},
			

下面就是css样式

@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			margin-top: 20px;
			width: 400px;
			margin: 0 auto;
			// margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}
	
	.swiper-box {
		border-radius: 10px;
		// margin: 0 20upx;
		height: 200px;
	}