vue中element-ui的轮播图自适应图片高度
0
最佳答案
0
把imgLoad方法的放在getImgUrl方法里的循环后面执行
axios.get("/carousel").then(res=>{
for(.....){
.....
}
this.imgLoad()
})
收获园豆：50
好像是好了，报错消失了=-=感谢，但是轮播图还是有问题，这下连报错都木得了，我传个窗口变化前后的图片出来
就是页面载入他的高度蜜汁一小行，一旦调整窗体他又可以自适应了，令人头秃
@安心_Blog: 应该按照楼下所说 先获取窗口高度，给高度赋初值。因为$refs不是响应式，你可以去问一下预设的轮播图比例，直接计算高度
//把代码2处替换
//this.imgHeight=this.$refs.image[0].height;
this.imgHeight=document.body.clientWidth * 原始图片高度 / 原始图片长度@sjxinghan: 感谢，问题解决了，大佬们还是很棒哒
其他回答(1)
0
我猜测，因为你父级里有v-if操作；
第一次进来，在mounted里执行方法，但是this.getImgUrl()是异步的，相当于此时this.imgLoad()同时执行；同时执行时，你的imgurl为[]，v-if将其转化为boolean为false，因此没有渲染，也就undefined了。
应该将像楼上所说，放在then成功回调里for循环之后，这样就有数据了。
第二个问题：因为你监听的是resize方法，只有在窗口变化才会触发，第一次进来是不会触发的。
你可以再写个window.onload方法，获取窗口高度后，给高度初始赋值
收获园豆：50
刚刚按照大佬的方式写了一下，高度的初始值是写进去了 但是被杠掉了，如图，我很懵，页面载入和路由切换回来默认获取的好像都是这个19px，而且优先级还贼高，只有页面窗口变化的时候，他才会变动，我想是不是还是我的图片获取和图片高度获取先后有问题，我的猜想：页面载入和路由切换回来的时候图片没有获取到也就没有所谓的图片高度，所以获取的可能是img标签的高度19px？，然后页面大小变化获取到了图片拿到当前状态下的图片高度了，然后就可以重新赋值高度从而达到了自适应效果，思路好像有了，但是怎么解决呢==！！！
感谢大佬，你们真棒
