// 圆点上下位置 [注意：此处没有空格]
.wx-swiper-dots.wx-swiper-dots-horizontal {
margin-bottom: -16rpx;}// 圆点样式
.wx-swiper-dots .wx-swiper-dot {
width: 10rpx;
height: 10rpx;
margin: 0 5rpx;}// 当前选中圆点样式
.wx-swiper-dots .wx-swiper-dot.wx-swiper-dot-active {
width: 16rpx;
border-radius: 10rpx;} Less样式写法
wxml
<view class="page-home__swiper-wrap">
<swiper indicator-dots="true"
autoplay="{{false}}"
interval="2000"
duration="500">
<block wx:for="{{list}}"
wx:key="*this">
<swiper-item>
<view>
{{item}} </view>
</swiper-item>
</block>
</swiper></view> wxsss
.page-home{
&__swiper-wrap {
height: 300rpx;
.wx-swiper-dots {
// 圆点样式
.wx-swiper-dot {
width: 8rpx;
height: 8rpx;
background: #cdd1d9;
margin: 0 5rpx;
// 当前选中圆点样式
&.wx-swiper-dot-active {
width: 16rpx;
height: 8rpx;
background: #ff9000;
box-shadow: 0 2rpx 24rpx 0rpx rgba(199, 107, 1, 0.3);
border-radius: 4rpx;
}
}
// 圆点上下位置
&.wx-swiper-dots-horizontal {
margin-bottom: -5rpx;
}
}
}} ！注意
需要说明的是，上样式需要写在页面page中的样式文件中，不能在自定义组件中写，不然会不生效。
如果swiper在自定义组件中使用，修改样式需要写在引用该组件的页面page里
