小程序中很多都会使用到轮播图，swiper 插件简单又好用。但是默认的导航点样式可能不符合日常开发的需求，所以很多项目中就需要修改导航点的样式。以下是修改前和修改后样式。
以下是WXML做的修改
<swiper class='swiperClass' circular autoplay bindchange="swiperChange">
<view wx:for="{{activeList}}" wx:key="index">
<swiper-item>
<image src="{{item.activePicture}}" class="slide-image"></image>
</swiper-item>
</view>
</swiper>
<!-- 导航点 -->
<view class="dots">
<block wx:for="{{activeList}}" wx:key="unique">
<view data-i='{{index}}' class="dot {{index == swiperCurrent ? ' active' : ''}}"></view>
</block>
</view>下面是wxss样式修改文章来源：https://www.toymoban.com/news/detail-541559.html
.swiperClass{
height: 476rpx;
}
.swiperClass image{
width: 336rpx;
height: 476rpx;
border-radius: 10rpx;
}
/* 导航点 */
.dots{
position: absolute;
left: 0;
right: 0;
bottom: 10rpx;
display: flex;
justify-content: center;
height: 20rpx;
}
.dots .dot{
margin: 0 6rpx;
width: 9rpx;
height: 9rpx;
background: #E2E1DD;
border-radius: 50%;
}
.dots .dot.active {
width: 25rpx;
height: 9rpx;
background: #2880FE;
border-radius: 15rpx;
}以下为JS部分文章来源地址https://www.toymoban.com/news/detail-541559.html
data: {
swiperCurrent: 0, //当前导航点
},
//图片变化时
swiperChange: function (e) {
this.setData({
swiperCurrent: e.detail.current
})
},到了这里，关于微信小程序使用swiper改变导航小圆点的样式与位置的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
