本篇内容介绍了“小程序如何自定义轮播图圆点组件”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！微信小程序自带的轮播图小点，
本篇内容介绍了“小程序如何自定义轮播图圆点组件”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
微信小程序自带的轮播图小点，是一个圆点且在图片上展示，不美观。上图为自定义后的轮播图效果
代码如下：
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;
}“小程序如何自定义轮播图圆点组件”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注恰卡网网站，小编将为大家输出更多高质量的实用文章！
本站部分文章来自网络或用户投稿，如无特殊说明或标注，均为本站原创发布。涉及资源下载的，本站旨在共享仅供大家学习与参考，如您想商用请获取官网版权，如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。