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

Alastor_L

已于 2022-12-02 10:26:12 修改

阅读量4.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue uniapp 小程序文章标签： uni-app 前端 html

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

本文链接：https://blog.youkuaiyun.com/CLdemies/article/details/126865911

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

5 篇文章

订阅专栏

uniapp

4 篇文章

订阅专栏

vue

3 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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