image的widthFix是如何计算高度的

分类：uni-app

uniapp nvue image

如果页面里从上到下有6张mode为widthfix的图片，要计算出这6张图片的总高度，触发时机应怎么写呢？怎么确定所有图片都已加载完毕，试过@load，但是这个仅针对单张图片，图片是动态读取的，数量不一定

2021-04-12 14:11 负责人:无分享

2 个回复

取舍 - 我们都如流星短暂但谁能像它闪耀

var num = 0;  
export default {  
    data() {  
        return {  
            imgList: [ /* 图片数组 */ ]  
        }  
    },  
    methods: {  
        load(){    //监听image load 事件  
            if(++num === this.imgList.length) {  
                //...  
            }  
        }      
    }  
}

jjhjiyu (作者)

load事件中获取到的event.detail中的高度是原图高度，不是真实高度

2021-04-12 14:30
取舍

回复 jjhjiyu: 如果你想获得渲染后的高度，你可以将图片的实际宽高对比 image组件的宽，算出image组件的高，或者等它渲染完成后用布局信息api 去获取，方法有很多

2021-04-12 14:32
jjhjiyu (作者)

实际上我监听load事件，uni.createSelectorQuery()去获取真实高度，如果不加延时，获取到的是0，加了延时才会有正确数值，@load触发了不表示图片已经被渲染了，否则也不会取到0了

2021-04-12 14:34
取舍

回复 jjhjiyu: 你可以直接用 uni.getImageInfo api

2021-04-12 14:36
jjhjiyu (作者)

回复取舍: 你知道widthfix的公式吗，假如750*300的图片，使用widthfix渲染出来的高度如何计算呢，或者如何确认6张图片全都渲染完毕了，再去获取节点高度

2021-04-12 14:36
jjhjiyu (作者)

回复取舍: uni.getImageInfo 获取的也是原图宽高，widthfix的图片渲染后的实际高度，不是原图高度，不知道他怎么缩放的，如果有公式我才可以通过@load拿到的原图宽高来计算

2021-04-12 14:42
取舍

回复 jjhjiyu: 假如你的image组件宽为 300rpx, 那么 imgHeight = img.height/img.width*300 单位(rpx)，你可以在计算中就把rpx 转px，也可以把结果转px，确认6张加载完毕就是最上面的代码，但是你说 load 并不是在图片加载完成后回调，那我就不知道了

2021-04-12 14:42
取舍

回复取舍: 或者在换种思路，你可以把图片高度都设成0，先不渲染图片，先用布局信息api拿到图片没渲染之前的高度拿到后渲染图片，把所有图片的高度计算后与之前的值相加就是了，

2021-04-12 14:46
jjhjiyu (作者)

回复取舍: 图片不用限制宽高，原图就是一张750*300的图片，自适应渲染,要求出渲染后图片的实际高度，如果@load是在图片渲染后回调，那这问题就简单了。。

2021-04-12 14:50
jjhjiyu (作者)

回复取舍: 我也有这么想过，但是就是无法确定图片到底渲染完没有

2021-04-12 14:52
取舍

回复 jjhjiyu: 说了计算图片高度不用@load了，你可以直接一个循环用uni.getImageInfo api, 不依赖于模板渲染

2021-04-12 14:54

深海智行 - 专注前端培训

伪代码：

imageload（）{  
index++  
if(index===6){  
getNodeInfo  
}  
}

jjhjiyu (作者)

但是getNodeInfo，图片不一定渲染完毕了，所以取到的高度有可能是错的，必须确认所有图片都渲染完毕了才能去getNodeInfo

2021-04-12 14:43
深海智行

回复 jjhjiyu: 你没看到 index 么？

2021-04-16 18:25
jjhjiyu (作者)

回复深海智行: 你没理解清楚哦，看这个https://ask.dcloud.net.cn/question/121161?item_id=160923&rf=false

2021-04-16 18:47
深海智行

回复 jjhjiyu: 你没理解清楚哦，当我没来过吧

2021-04-19 11:07
jjhjiyu (作者)

回复深海智行: nvue 页面图片下载完后就会触发 load 事件，同时触发重新排版，两个都是异步的，在load事件中获取 image组件的高度会存在获取不到的情况，你这个方法也许适用vue，但不适用nvue，在上方的回复我也说了，@load可能早于图片渲染触发，所以只监听@load这个方法不是不对，而是不严谨

2021-04-19 15:08

该问题目前已经被锁定, 无法添加新回复

image的widthFix是如何计算高度的

2 个回复

公告

相关问题

image的widthFix是如何计算高度的

与内容相关的链接

2 个回复

公告

相关问题