今天就跟大家聊聊有关微信小程序中怎么自定义一个轮播图，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
创新互联公司是一家集网站建设,广州企业网站建设,广州品牌网站建设,网站定制,广州网站建设报价,网络营销,网络优化,
广州网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
首先当然是要禁用掉（直接删掉）swiper属性indicator-dots，再用view组件模拟dots，对应的代码如下：
然后是wxss代码：
swiper-container{
position: relative;
}
.swiper-container .swiper{
height: 300rpx;
}
.swiper-container .swiper .img{
width: 100%;
height: 100%;
}
.swiper-container .dots{
position: absolute;
left: 0;
right: 0;
bottom: 20rpx;
display: flex;
justify-content: center;
}
.swiper-container .dots .dot{
margin: 0 8rpx;
width: 14rpx;
height: 14rpx;
background: #fff;
border-radius: 8rpx;
transition: all .6s;
}
.swiper-container .dots .dot.active{
width: 24rpx;
background: #f80;
}再对swiper的bindchange属性绑定对应的事件：
Page({
data: {
slider: [
{picUrl: '../../images/T003R720x288M000000rVobR3xG73f.jpg'},
{picUrl: '../../images/T003R720x288M000000j6Tax0WLWhD.jpg'},
{picUrl: '../../images/T003R720x288M000000a4LLK2VXxvj.jpg'},
],
swiperCurrent: 0,
},
swiperChange: function(e){
this.setData({
swiperCurrent: e.detail.current
})
}
})看完上述内容，你们对微信小程序中怎么自定义一个轮播图有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。
网页标题：微信小程序中怎么自定义一个轮播图-创新互联
本文URL：
http://cdxtjz.cn/article/cehoce.html
