小程序如何自定義輪播圖圓點組件

本篇內容介紹了“小程序如何自定義輪播圖圓點組件”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

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

代碼如下：

wxhtml：

<!-- 輪播圖 -->
    <view class="lbt">
      <swiper class="banner-list"  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;
}

“小程序如何自定義輪播圖圓點組件”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！