uniapp swiper 卡片轮播 修改指示点样式效果demo（整理）_uniapp好看的卡片样式

效果图：

<template>
	<swiper class="swiper-box" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
		:duration="duration" circular="true" previous-margin="20px" next-margin="20px">
		<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" />
			</view>
		</swiper-item>
	</swiper>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true, //是否显示面板指示点
				autoplay: true, //是否自动切换
				interval: 2000, //切换的间隔时间
				duration: 500, //滑动动画时长
				info: [{
						colorClass: 'uni-bg-red',
						url: 'https://img.zcool.cn/community/01hzxc63yqx11b9znjoimm3734.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,Q_100',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://img.zcool.cn/community/01jsy5em8t7jzkbs17kncj3837.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,Q_100',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://img.zcool.cn/community/01dz1ugf5tuetaf47pyvxj3633.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,Q_100',
						content: '内容 C'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://img.zcool.cn/community/01vfjnenucrnxlyi2luwzu3437.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100/format,webp/quality,Q_100',
						content: '内容 D'
					}
				],

			}
		},
	}
</script>

<style lang="scss">
	
	.swiper-box {
		/* width: 95%; */
		height: 300rpx;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #999;
		color: #fff;
		margin: 10px;
		border-radius: 15upx;
		/* app上运行不显示图片，就需要加下面这行，设置高度 */
		height: 280upx;
	}

	.image {
		/* width: 750rpx; */
		width: 100%;
		height: 300rpx;
		border-radius: 15upx;
	}

	/* 默认指示点的样式 */
	.swiper-box .wx-swiper-dot {
		width: 15rpx;
		height: 15rpx;
		background: indianred;
		border-radius: 15rpx;
	}

	/* 选中指示点的样式 */
	.swiper-box .wx-swiper-dot.wx-swiper-dot-active {
		width: 30rpx;
		height: 15rpx;
		background: indianred;
		border-radius: 15rpx;
	}
</style>

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

原文链接：https://blog.csdn.net/qq_59795720/article/details/126118918?spm=1001.2014.3001.5502