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

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

自带组件 swiper

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;
			}
		}
	}
}