小程序自定义轮播图圆点组件

本文实例为大家分享了小程序自定义轮播图圆点组件的具体代码,供大家参考,具体内容如下

微信小程序自带的轮播图小点,是一个圆点且在图片上展示,不美观。上图为自定义后的轮播图效果

代码如下:

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; }

推荐阅读