建站
咨询
售后
建站咨询
微信小程序实现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图轮播效果
当前URL：http://www.jxjierui.cn/article/jcpipi.html
