介绍 & lt; https://www.yisu.com/zixun/image src=" . ./上传/2. jpg”bindload=癷mageLoad”
风格="宽度:{{imgwidth}} rpx;高度:{{imgheight}} rpx; ">
小编给大家分享一下小程序怎么实现图像组件图片自适应宽度比例显示的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
具体如下:
<强>一。了解图像组件
由于图像有默认的固定的宽度和高度,这样我们在做图片自适应的时候,就不好做了。下面就来一起解决下
<强>二。方法
<强>(一)。使用模式:widthFix
widthFix:宽度不变,高度自动变化,保持原图宽高比不变。
首先我们先设置图像的模式为widthFix,然后给图片加一个固定rpx的宽度,比如:730 rpx。
这样图片也可以自适应了,因为小程序的rpx本身就是一个自适应显示的单位
<强>(二)。使用bindload绑定函数动态自适应。
我们可以给形象绑定一个函数,这个函数,如上面的bindload说明一样,我们可以获取到原图的宽度和高度。
然后计算他们的宽高比率,然后设置一个宽度大小(rpx),最后通过风格动态设置图像的宽高。代码如下:
1。编写页面结构指数。wxml:
2。设置数据索引。js
//获取应用实例
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
,,,})
,,}
}) 
以上是“小程序怎么实现图像组件图片自适应宽度比例显示的方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!
