欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

小程序自定義輪播圖圓點(diǎn)組件

 更新時(shí)間：2022年06月24日 16:43:11   作者：dreamimport  
這篇文章主要為大家詳細(xì)介紹了小程序自定義輪播圖圓點(diǎn)組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了小程序自定義輪播圖圓點(diǎn)組件的具體代碼，供大家參考，具體內(nèi)容如下

微信小程序自帶的輪播圖小點(diǎn)，是一個(gè)圓點(diǎn)且在圖片上展示，不美觀。上圖為自定義后的輪播圖效果

代碼如下：

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}}">
? ? ? <!-- 循環(huán)圖片張數(shù)有多少?gòu)垐D片就有多少個(gè)小點(diǎn) -->
? ? ? <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
? ? ? </block>
? ? ? </view>
? ? </view>
? </view>

wxjs：

// 輪播圖片改變時(shí)，小圓點(diǎn)也改
? 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;
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論