微信小程序中怎么自定义一个轮播图

今天就跟大家聊聊有关微信小程序中怎么自定义一个轮播图,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

创新互联专注于企业成都营销网站建设、网站重做改版、凉州网站定制设计、自适应品牌网站建设、H5场景定制购物商城网站建设、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为凉州等各大城市提供网站开发制作服务。

首先当然是要禁用掉(直接删掉)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://bzwzjz.com/article/pegedd.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 上市集团网站建设 成都企业网站设计 成都网站建设 自适应网站建设 成都网站设计制作公司 重庆电商网站建设 网站建设公司 高端网站设计 成都h5网站建设 成都企业网站建设公司 成都网站建设 成都营销网站制作 网站建设公司 定制网站设计 四川成都网站制作 外贸营销网站建设 重庆手机网站建设 成都网站制作 广安网站设计 企业网站设计 高端网站设计推广 成都网站制作