微信小程序实现banner图轮播效果
本文实例为大家分享了微信小程序实现banner图轮播的具体代码,供大家参考,具体内容如下
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名与空间、网络空间、营销软件、网站建设、贵南网站维护、网站推广。
效果图:
indicator-active-color="#007aff"//修改选中图片圆点的颜色
js:
const app = getApp() Page({ data: { //-----------模拟banner图----------- imgUrls: [ '/image/1545118381903.jpg', '/image/1545118566631.jpg' ], circular: true, //是否显示画板指示点 indicatorDots: true, //选中点的颜色 //是否竖直 vertical: false, //是否自动切换 autoplay: true, //自动切换的间隔 interval: 3000, //滑动动画时长毫秒 duration: 1000, //所有图片的高度 imgheights: [], //图片宽度 imgwidth: 750, //默认 current: 0 }, imageLoad: function (e) {//获取图片真实宽度 var imgwidth = e.detail.width, imgheight = e.detail.height, //宽高比 ratio = imgwidth / imgheight; console.log(imgwidth, imgheight) //计算的高度值 var viewHeight = 750 / ratio; var imgheight = viewHeight; var imgheights = this.data.imgheights; //把每一张图片的对应的高度记录到数组里 imgheights[e.target.dataset.id] = imgheight; this.setData({ imgheights: imgheights }) }, bindchange: function (e) { // console.log(e.detail.current) this.setData({ current: e.detail.current }) }, } })
wxml:
wxss:
.swiper image { width: 100%; height: auto; } .swiper-image { height: 100%; width: 100%; } .slide-image { height: 100%; width: 100%; display: block; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
网站栏目:微信小程序实现banner图轮播效果
当前链接:http://pwwzsj.com/article/jcpipi.html