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

Alastor_L

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

阅读量2.8k

点赞数 2

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

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

本文链接：https://blog.csdn.net/CLdemies/article/details/126865911

版权

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

5 篇文章 0 订阅

订阅专栏

uniapp

4 篇文章 0 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

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