微信小程序实现banner图轮播（动态获取数据），自动获取图片高度 - 好文

效果图：

indicator-active-color="#007aff"//修改选中图片圆点的颜色

js:
const app = getApp() Page({ data: { //-----------模拟banner图----------- imgUrls:
[ 'http://cigtb.cn/upload/image/1545118381903.jpg',
'http://cigtb.cn/upload/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; }

热门工具换一换