微信小程序实现banner图轮播效果

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了微信小程序实现banner图轮播效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1814字，纯文字阅读大概需要3分钟。

内容图文

本文实例为大家分享了微信小程序实现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:

<!-------------首页轮播图----------------- -->
<view class='swiper'>
 <swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" duration="{{duration}}" interval='{{interval}}'indicator-active-color="#007aff" bindchange="bindchange" circular="{{circular}}" style="height:{{imgheights[current]}}rpx;">
 <block wx:for='{{imgUrls}}' wx:key="{{index}}">
 <swiper-item>
 <image src="{{item}}" data-id='{{index}}' class="slide-image" mode="widthFix" bindload="imageLoad" />
 </swiper-item>
 </block>
 </swiper>
</view>

wxss:

.swiper image {
 width: 100%;
 height: auto;
}
 
.swiper-image {
 height: 100%;
 width: 100%;
}
 
.slide-image {
 height: 100%;
 width: 100%;
 display: block;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的微信小程序实现banner图轮播效果全部内容，希望文章能够帮你解决微信小程序实现banner图轮播效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端