小程序如何自定义轮播图圆点组件
导读：本文共1105.5字符，通常情况下阅读需要4分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 微信小程序自带的轮播图小点，是一个圆点且在图片上展示，不美观。上图为自定义后的轮播图效果代码如下：wxhtml：<!--轮播图--><viewclass="lbt"><swiperclass="banner-list"circular="{{circular}}"ind... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。
微信小程序自带的轮播图小点，是一个圆点且在图片上展示，不美观。上图为自定义后的轮播图效果
代码如下：
wxhtml：
<!--轮播图--><viewclass="lbt"><swiperclass="banner-list"circular="{{circular}}"indicator-dots=''autoplay="{{autoplay}}"interval="{{interval}}"duration="{{duration}}"bindchange="swiperChange"><blockwx:for="{{imgUrls}}"wx:key='{{item.id}}'><swiper-item><imagesrc="{{urls}}{{item.image}}"class="slide-image"width="100%"/></swiper-item></block></swiper><!--这里是自定义控制组件的模块--><viewclass="dots"><blockwx:for="{{imgUrls}}"wx:key="{{item.id}}"><!--循环图片张数有多少张图片就有多少个小点--><viewclass="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:06rpx;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;} </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
小程序如何自定义轮播图圆点组件的详细内容，希望对您有所帮助，信息来源于网络。