uniapp改变swiper轮播图指示点样式

项目使用的vue3

1.home.vue使用swiper组件

		<!-- 轮播图区-->
		<swiper class="swiper-box" :indicator-dots="true" indicator-color="rgba(238, 238, 238, 0.3)"
		 indicator-active-color="rgba(238, 238, 238, 1)" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="item in swiperList" :key="item.goods_id">
				<view class="swiper-item">
					<image class="swiper-image" :src="item.image_src"></image>
				</view>
			</swiper-item>
		</swiper>

2.在App.vue中重新设置样式：

注意判断条件，且必须设置在App.vue中

	/* uni-app中的条件判断语句 */
	/* #ifdef APP-PLUS  || H5 */
	uni-swiper .uni-swiper-dot {
		width: 10rpx;
		height: 4rpx;
	}
	uni-swiper .uni-swiper-dot-active {
		width: 40rpx;
		border-radius: 6rpx;
	}
	/* #endif */
 
	/* #ifdef MP-WEIXIN */
	wx-swiper .wx-swiper-dot {
		width: 10rpx;
		height: 10rpx;
	}
 
	wx-swiper .wx-swiper-dot-active {
		width: 30rpx;
		height: 10rpx;
		border-radius: 6rpx;
	}
	/* #endif */