从品牌网站建设到网络营销策划,从策略到执行的一站式服务
本文实例为大家分享了微信小程序实现层叠轮播图的具体代码,供大家参考,具体内容如下
创新互联主要从事网站制作、网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务开封,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220
wxml:
wxss:
.banner-swiper { width: 100%; height: 500rpx; overflow: hidden; } swiper { display: block; height: 500rpx; position: relative; } .slide-image { width: 96%; display: block; margin: 0 auto; height: 450rpx; margin-top:25rpx; } .active{ margin-top:0rpx; height: 500rpx; }
js:
Page({ data: { //轮播图 swiperCurrent:1, arr: [{ images: 'images/1.jpg' }, { images: 'images/5.jpg' }, { images: 'images/3.jpg' }, { images: 'images/4.jpg' } ] indicatorDots: true, autoplay: true, interval: 2000, duration: 1000, circular: true, beforeColor: "white",//指示点颜色 afterColor: "coral",//当前选中的指示点颜色 previousmargin:'30px',//前边距 nextmargin:'30px',//后边距 }, //轮播图的切换事件 swiperChange: function (e) { console.log(e.detail.current); this.setData({ swiperCurrent: e.detail.current //获取当前轮播图片的下标 }) }, //滑动图片切换 chuangEvent: function (e) { this.setData({ swiperCurrent: e.currentTarget.id }) }, })
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图