uniapp项目需要改变swiper指示点的样式

项目场景：

uniapp项目需要改变swiper指示点的样式

---

问题描述：

使用uniapp组件库里面的swiper组件时，发现在组件内无法使用类名对swiper的指示点进行样式修改

---

原因分析：

组件内无法强制修改uniapp组件库的组件（emmmmm。。大概是这样）

---

解决方案：

找了很多帖子发现他们在组件里面写

wx-swiper .wx-swiper-dot {
  	width: 10px;
  	height: 3px;
  }
  wx-swiper .wx-swiper-dot-active {
	background-color: #000;
	width: 20px;
	border-radius: 5px;
  }

发现没有效果
然后改成

uni-swiper .uni-swiper-dot {
  	width: 10px;
  	height: 3px;
  }
  uni-swiper .uni-swiper-dot-active {
	background-color: #000;
	width: 20px;
	border-radius: 5px;
  }

也没有效果
后来想应该是样式没有用在全局
就在App.vue里面写了点样式 发现生效了
嗯 问题就这样解决了
建议在App.vue里面写的时候用类名去控制样式 不然当你要在第二个页面使用轮播并且指示点样式不同时 会很难想到

在你的其他组件里面的swiper组件

index.vue

<swiper class="swiperindex" :indicator-dots="true" indicator-color="rgba(0, 98, 101, 0.14)" indicator-active-color="#006265" :autoplay="false" :interval="3000" :duration="500">
				<swiper-item>
					<view class="swiper-item uni-bg-red">A</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-green">B</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-blue">C</view>
				</swiper-item>
			</swiper>

App.vue

.swiperindex .uni-swiper-wrapper .uni-swiper-dots-horizontal .uni-swiper-dot-active {
		width: 74rpx;
		border-radius: 8rpx;
	}

第一次写 希望能帮到点人