小程序自定義輪播圖圓點組件
本文實例為大傢分享瞭小程序自定義輪播圖圓點組件的具體代碼，供大傢參考，具體內容如下
微信小程序自帶的輪播圖小點，是一個圓點且在圖片上展示，不美觀。上圖為自定義後的輪播圖效果
代碼如下：
wxhtml：
<!-- 輪播圖 -->
<view class="lbt">
<swiper class="banner-list" style="height:100%;" circular="{{circular}}" indicator-dots='' autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperChange">
<block wx:for="{{imgUrls}}" wx:key='{{item.id}}'>
<swiper-item>
<image src="{{urls}}{{item.image}}" class="slide-image" width="100%" />
</swiper-item>
</block>
</swiper>
<!-- 這裡是自定義控制組件的模塊 -->
<view class="dots">
<block wx:for="{{imgUrls}}" wx:key="{{item.id}}">
<!-- 循環圖片張數有多少張圖片就有多少個小點 -->
<view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
</block>
</view>
</view>
</view>
wxjs：
// 輪播圖片改變時，小圓點也改
swiperChange: function (e) {
this.setData({
swiperCurrent: e.detail.current
})
},
wxcss：
.lbt {
position: relative;
width: 100%;
height: 300rpx;
padding: 30rpx;
box-sizing: border-box;
border-radius: 10rpx;
}
.lbt .dots{
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
}
.lbt .dots .dot{
margin: 0 6rpx;
width: 18rpx;
height: 10rpx;
background: #A2A2A2;
border-radius: 6rpx;
transition: all .6s;
}
.lbt .dots .dot.active{
width: 30rpx;
height: 10rpx;
background:#3d3d3d;
}
.slide-image {
width: 100%;
height: 100%;
border-radius: 10rpx;
}
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。