【样式】轮播图样式 uview 版本 : “2.0.31“_uview u-swiper indicatorstyle

![在这里插入图片描述](https://img-blog.csdnimg.cn/6cd568ce932b4ea7ae52f10365979680.png

html

<view class="addSwiperdiv">
				<image src="@/static/66.png" mode="aspectFill" class="titleimg"></image>
				<view class="addcontent">
					<u-swiper 
					:list="list1" 
					imgMode='aspectFill' 
					circular
					height='308rpx' 
					@change="e => current = e.current"
					@click="clickSwiper('/pagesA/pages/youxuan/youxuan')">
					</u-swiper>
					<view class="indicator" slot="indicator">
						<view class="indicator__dot" v-for="(item, index) in list1" :key="index"
							:class="[index == current && 'indicator__dot--active']">
						</view>
					</view>
				</view>

			</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

css

.addSwiperdiv {
			width: 336rpx;
			height: 446rpx;
			border-radius: 16rpx;
			background: linear-gradient(135deg, #C82920 0%, #CB1F1F 100%);
			position: relative;

			.titleimg {
				width: 242rpx;
				height: 34rpx;
				position: absolute;
				top: 28rpx;
				left: 48rpx;
				right: 48rpx;
			}

			.addcontent {
				position: absolute;
				top: 84rpx;
				left: 14rpx;
				right: 14rpx;
				bottom: 54rpx;
				width: 308rpx;
				height: 308rpx;
				background: #FFF9F9;
				border-radius: 16rpx;
			}
		}
		.indicator {
	// @include flex(row);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 24rpx;

	&__dot {
		height: 6px;
		width: 6px;
		border-radius: 100px;
		background-color: rgba(255, 255, 255, 0.35);
		margin: 0 5px;
		transition: background-color 0.3s;

		&--active {
			background-color: #ffffff;
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48