介绍 & lt; https://www.yisu.com/zixun/image src=" . ./上传/2. jpg”bindload=癷mageLoad”
风格="宽度:{{imgwidth}} rpx;高度:{{imgheight}} rpx; "> //获取应用实例
var app =, getApp ()
页面({
,,数据:{
,,,screenWidth:, 0,
,,,screenHeight: 0,
,,,imgwidth: 0,
,,,imgheight: 0,
,,},
onLoad才能:函数(),{
,,,var _this =,;
,,,wx.getSystemInfo ({
,,,,,:成功,函数(res), {
,,,,,,,_this.setData ({
,,,,,,,,,screenHeight:, res.windowHeight,
,,,,,,,,,screenWidth:, res.windowWidth,
,,,,,,,});
,,,,,}
,,,});
,,},
,,imageLoad:函数(e), {
,,,var _this=;
,,,var 宽度=e.detail.width美元,,,//获取图片真实宽度
,,,,,身高=e.detail.height美元,
,,,,,比=宽/高美元;,,//图片的真实宽高比例
,,,var viewWidth=500,,,,,,,//设置图片显示宽度,
,,,,,viewHeight=500/比率;,,//计算的高度值
,,,this.setData ({
,,,,,imgwidth: viewWidth,
,,,,,imgheight: viewHeight
,,,})
,,}
})
这篇文章主要介绍微信小程序如何实现图像组件图片自适应宽度比例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
微信小程序实现图像组件图片自适应宽度比例显示的方法,具体如下:
<强>一。了解图像组件
由于图像有默认的固定的宽度和高度,这样我们在做图片自适应的时候,就不好做了。下面就来一起解决下
<强>二。方法
<强>(一)。使用模式:widthFix
widthFix:宽度不变,高度自动变化,保持原图宽高比不变。
首先我们先设置图像的模式为widthFix,然后给图片加一个固定rpx的宽度,比如:730 rpx。
这样图片也可以自适应了,因为小程序的rpx本身就是一个自适应显示的单位
<强>(二)。使用bindload绑定函数动态自适应。
我们可以给形象绑定一个函数,这个函数,如上面的bindload说明一样,我们可以获取到原图的宽度和高度。
然后计算他们的宽高比率,然后设置一个宽度大小(rpx),最后通过风格动态设置图像的宽高。代码如下:
1。编写页面结构指数。wxml:
2。设置数据索引。js
以上是“微信小程序如何实现图像组件图片自适应宽度比例”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
