小程序轮播图圆点组件如何改写为长尾词疑问？

本文共计514个文字，预计阅读时间需要3分钟。

本文分享了一个小程序自定义轮播图组件的代码示例。代码展示了如何使用自定义轮播图，并附有大家的参考内容。

微信小程序自带轮播图小点点组件，是一个圆形且在图片上展示的组件。但默认效果不太美观。下面是自定义后的轮播图效果：


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

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

代码如下：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。