微信小程序swiper图片尺寸_微信小程序 swiper 轮播图 高度自适应

微信小程序 swiper 轮播图 高度自适应

发布时间：2018-07-20 15:34,

浏览次数：588

, 标签：

swiper

小程序中使用swiper 组件 ，实现轮播图高度自适应效果。

先上最终实现效果图

先看一下微信官方文档介绍  swiper 组件

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

代码部分

wxml:

autoplay='{ {true}}' interval="{ {5000}}" duration="{ {500}}" circular="{ {true}}"

bindchange='bindchange' style="height:{ {imgheights[current]}}rpx;">

wx:for="{ {imgUrls}}">

class='image-view'

style="height:{ {imgheights[current]}}rpx;width:{ {imgwidth}}rpx;"

bindload="imageLoad" data-src='{ {item}}'>

js:

Page({ data: { imgheights: [], curre