????????小程序中很多都會(huì)使用到輪播圖，swiper 插件簡(jiǎn)單又好用。但是默認(rèn)的導(dǎo)航點(diǎn)樣式可能不符合日常開發(fā)的需求，所以很多項(xiàng)目中就需要修改導(dǎo)航點(diǎn)的樣式。以下是修改前和修改后樣式。
?以下是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>
<!-- 導(dǎo)航點(diǎn) -->
<view class="dots">
<block wx:for="{{activeList}}" wx:key="unique">
<view data-i='{{index}}' class="dot {{index == swiperCurrent ? ' active' : ''}}"></view>
</block>
</view>下面是wxss樣式修改文章來源：http://www.zghlxwxcb.cn/news/detail-541559.html
.swiperClass{
height: 476rpx;
}
.swiperClass image{
width: 336rpx;
height: 476rpx;
border-radius: 10rpx;
}
/* 導(dǎo)航點(diǎn) */
.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部分文章來源地址http://www.zghlxwxcb.cn/news/detail-541559.html
data: {
swiperCurrent: 0, //當(dāng)前導(dǎo)航點(diǎn)
},
//圖片變化時(shí)
swiperChange: function (e) {
this.setData({
swiperCurrent: e.detail.current
})
},到了這里，關(guān)于微信小程序使用swiper改變導(dǎo)航小圓點(diǎn)的樣式與位置的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
