300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 微信小程序swiper图片尺寸_微信小程序 - swiper 高度自适应

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

时间:2020-02-20 16:31:17

相关推荐

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

我这边开发用的是 wepy,代码风格跟小程序原生的不太一样,下面代码是依照小程序的代码风格整理之后的,可能有不同或遗漏的地方,但这都不重要,注意领会精神!

原理:

获取设备宽度

获取 swiper 内的图片宽高,计算宽高比

根据宽高比计算出图片宽度100%(屏幕宽度)时图片的高度 imgHeight

由于多张图片可能高度不一致,所以将所有的 imgHeight 放入一个数组,swiper 滑动时就将当前图片的 imgHeight 赋值给 swiper。

// wxml

// js

data: {

windowWidth: 0,

imgUrls: [...],

imgsHeight: [],

current: 0,

imgWidth: 750

}

// 每张图片加载完成会执行 imageload 方法

imageLoad: function(e) {

// 获取图片宽高比

const ratio = e.detail.width / e.detail.height

// 按照宽高比计算图片宽度 100% 时的高度

const imgHeight = this.windowWidth / ratio

// 把每一张图片对应的高度记录到 imgsHeight 数组里

this.imgsHeight[e.target.dataset.id] = imgHeight

},

// swiper 绑定 bindchange 函数,用来获取 current 值,传入 data

bindchange: function(e) {

this.setData({

current: e.detail.current

})

}

onLoad() {

// 获取设备屏幕宽度

wx.getSystemInfo({

success: (res) => {

this.windowWidth = res.windowWidth

}

})

}

// wxss

.swiper image {

width: 100%;

height: 100%;

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。