uniapp 修改内置swiper 组件dot 指示点样式

原创已于 2022-12-02 10:26:12 修改 · 4.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端 #html

于 2022-09-15 10:17:31 首次发布

小程序同时被 3 个专栏收录

5 篇文章

订阅专栏

uniapp

4 篇文章

订阅专栏

vue

3 篇文章

订阅专栏

本文介绍了如何在uniapp中修改swiper组件的指示点样式，通过使用`::v-deep`深入选择器，调整了swiper的uni-swiper-dot和uni-swiper-dot-active的尺寸、圆角和间距，实现了个性化指示点效果。示例代码详细展示了具体的样式设置，帮助开发者打造更符合设计需求的滑动轮播组件。

uniapp修改swiper 指示点样式

这里也可以使用 ::v-deep

			<swiper class="swiper" circular :indicator-dots="true" :duration="200" indicator-active-color="#9FF6EA"
				:circular="false" indicator-color="#E8E8E8">
				<swiper-item v-for="(item,index) in moduleList" :key="index" class="swiperItemBox flex_start_start">
					<view class="swiperItem flex_column_center_center active-item" v-for="(i,j) in item.list"
						
					</view>
				</swiper-item>
			</swiper>


	//.swiper 是swiper 组件父级或swiper 组件类名
	/deep/ .swiper .uni-swiper-dot-active {
		width: 16px !important;
		height: 6rpx;
		border-radius: 5rpx;
	}

	/deep/ .swiper .uni-swiper-dot {
		width: 16px !important;
		height: 6rpx;
		border-radius: 5rpx;
	}

	/deep/.swiper .uni-swiper-dots-horizontal .uni-swiper-dot {
		margin-right: 10rpx;
	}