uni-app修改默认的swiper 面板指示点

一、效果图 

 二、代码

<template>
	<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff">
		<swiper-item v-for='(item,index) in dataList' :key='index'>
			<view class="swiper-item">
				<image class='swiper-img' :src="item.imgUrl" mode="aspectFill"></image>
			</view>
		</swiper-item>
	</swiper>
</template>
<style scoped>
swiper{
	width:100%;
	height: 360rpx;
}
.swiper-img{
	width:100%;
	height: 360rpx;
}

</style>

三、修改样式在App.vue 中的style写

<style lang="scss">
	@import "uview-ui/index.scss";
	/* #ifdef APP-PLUS  || H5*/
	uni-swiper .uni-swiper-dot {
		width: 40rpx;
		height: 4rpx;
	}
	uni-swiper .uni-swiper-dot-active {
		width: 40rpx;
		border-radius: 6rpx;
	}
 
	/* #endif */
 
	/* #ifdef MP-WEIXIN */
	wx-swiper .wx-swiper-dot {
		width: 40rpx;
		height: 4rpx;
	}
 
	wx-swiper .wx-swiper-dot-active {
		width: 40rpx;
		height: 4rpx;
		border-radius: 6rpx;
	}
	/* #endif */
</style>