需求:两个盒子的高度不固定,且右侧盒子高度随左侧盒子高度变化。


思路:首先弄清楚左侧盒子高度的影响因素,如文章用例是调用接口获取到的数据条数不同导致左侧盒子的高度变化;

解决办法:调用接口获取到数据之后再写获取盒子高度的语句,才能获取到真实的盒子高度。

<div ref="dong"> 左盒子 </div>
<div :style="{ height:rightHeight + 'px' }"> 右盒子 </div>

//接口函数
getData({id:id}).then(res=>{
    if(res.code == 200) {      
        this.$nextTick(()=>{      //获取左侧动态盒子高度,赋值给右侧
            let height = this.$refs.testDiv.offsetHeight;
            this.rightHeight = height ;
        }) 
    }
})

注意点:

        1、自适应盒子的高度写成动态内联样式的形式,且需要带单位:'px'

        2、this.$nextTick语句要写在接口函数里面(也就是拿到数据之后,写这句),要不然获取不到真实的dom高度;

        3、获取动态盒子高度的方法不一定要用$refs,根据id、class获取也可以。

 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐