今天就跟大家聊聊有关微信小程序中怎么自定义一个轮播图,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
创新互联专注于企业成都营销网站建设、网站重做改版、凉州网站定制设计、自适应品牌网站建设、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 }) } })
看完上述内容,你们对微信小程序中怎么自定义一个轮播图有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。