uni-app banner 轮播实现 添加 指示点

uni-app 实现轮播 添加指示点

自带组件 swiper

<view class="banner">
	<swiper class="swiper" circular autoplay="true">
		<swiper-item v-for="item in bannerList" class="swiper-item">
			<!-- <view class="swiper-item" v-for="item in bannerList"> -->
				<image :src="item.imgSrc" @click="applyCheck(item.id)"></image>
			<!-- </view> -->
		</swiper-item>
	</swiper>
	<!-- 指示点 -->
	<view class="swiper-point">
		<view class="point" :class="bannerIndex==index?'point-on':''" v-for="(item , index) in bannerList"></view>
	</view>
</view>

ps： 渲染轮播是在 swiper-item 标签里面

样式 SCSS语法

.banner{
	height:220upx;
	margin:30upx auto;
	box-shadow:0 0 8upx 1upx rgba(0, 0, 0, 0.1);
	border-radius:20upx;
	position: relative;
		.swiper{
			width: 100%;
			height:100%;
			.swiper-item{
				width:100%;
				height: 100%;
				image{
					width: 100%;
					height: 100%;
					border-radius:20upx;
				}
			}
		}
		.swiper-point{
			position: absolute;
			bottom: 8upx;
			left: 50%;
			display: flex;
			.point{
				width: 12upx;
				height: 12upx;
				margin-right: 12upx;
				border-radius: 50%;
				background: #FFFFFF;
			}
			.point-on{
				background: #F46442;
			}
		}
	}
}