首页 新闻 赞助 找找看

vue中element-ui的轮播图自适应图片高度

0
悬赏园豆:100 [已解决问题] 解决于 2019-07-11 11:31

问题:按照网上的一篇博文写了一个轮播图高度自适应图片的高度,可以自适应但是需要调整窗体大小才行,页面刷新或者刚载入的时候高度还是element-ui的固定高度,报错我贴了个图,不是很懂,控制台输出的对象里命名有一个图片数组,但是打点调用的时候显示未定义,希望有大佬可以帮忙下,万分感谢,如果我自己后面琢磨出来也会贴出来,供大家参考=-=,下班了,告辞

第一次提问所以不清楚能不能直接贴代码,怕格式乱的,所以贴了图片,拜托了,大佬们

安心_Blog的主页 安心_Blog | 初学一级 | 园豆:102
提问于:2019-07-10 23:41
< >
分享
最佳答案
0

把imgLoad方法的放在getImgUrl方法里的循环后面执行

axios.get("/carousel").then(res=>{
    for(.....){
        .....
    }
    this.imgLoad()
})
收获园豆:50
sjxinghan | 小虾三级 |园豆:502 | 2019-07-11 09:57

好像是好了,报错消失了=-=感谢,但是轮播图还是有问题,这下连报错都木得了,我传个窗口变化前后的图片出来

安心_Blog | 园豆:102 (初学一级) | 2019-07-11 10:14

就是页面载入他的高度蜜汁一小行,一旦调整窗体他又可以自适应了,令人头秃

安心_Blog | 园豆:102 (初学一级) | 2019-07-11 10:19

@安心_Blog: 应该按照楼下所说 先获取窗口高度,给高度赋初值。因为$refs不是响应式,你可以去问一下预设的轮播图比例,直接计算高度

//把代码2处替换
//this.imgHeight=this.$refs.image[0].height;
this.imgHeight=document.body.clientWidth * 原始图片高度 / 原始图片长度
sjxinghan | 园豆:502 (小虾三级) | 2019-07-11 11:11

@sjxinghan: 感谢,问题解决了,大佬们还是很棒哒

安心_Blog | 园豆:102 (初学一级) | 2019-07-11 11:32
其他回答(1)
0

我猜测,因为你父级里有v-if操作;
第一次进来,在mounted里执行方法,但是this.getImgUrl()是异步的,相当于此时this.imgLoad()同时执行;同时执行时,你的imgurl为[],v-if将其转化为boolean为false,因此没有渲染,也就undefined了。
应该将像楼上所说,放在then成功回调里for循环之后,这样就有数据了。

第二个问题:因为你监听的是resize方法,只有在窗口变化才会触发,第一次进来是不会触发的。
你可以再写个window.onload方法,获取窗口高度后,给高度初始赋值

收获园豆:50
你风致 | 园豆:2211 (老鸟四级) | 2019-07-11 10:20

刚刚按照大佬的方式写了一下,高度的初始值是写进去了 但是被杠掉了,如图,我很懵,页面载入和路由切换回来默认获取的好像都是这个19px,而且优先级还贼高,只有页面窗口变化的时候,他才会变动,我想是不是还是我的图片获取和图片高度获取先后有问题,我的猜想:页面载入和路由切换回来的时候图片没有获取到也就没有所谓的图片高度,所以获取的可能是img标签的高度19px?,然后页面大小变化获取到了图片拿到当前状态下的图片高度了,然后就可以重新赋值高度从而达到了自适应效果,思路好像有了,但是怎么解决呢==!!!

支持(0) 反对(0) 安心_Blog | 园豆:102 (初学一级) | 2019-07-11 11:03

感谢大佬,你们真棒

支持(0) 反对(0) 安心_Blog | 园豆:102 (初学一级) | 2019-07-11 11:33
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册