uniapp如何动态修改每个view div的高度?
两种办法:
第一种
getStyle() {
//使用 uni.createSelectorQuery() 需要在生命周期 mounted 后进行调用。
let infos = uni.createSelectorQuery().select(".body")
console.log('info', info) // 获取元素
infos.boundingClientRect((data) => { //data - 各种参数
console.log('data--------->', data)
console.log('data.width', data.width) // 获取元素宽度
console.log('data.height', data.height) // 获取元素宽度
this.styleVar = {
height: data.height + 'px'
}
}).exec()
}
————————————————
版权声明:本文为CSDN博主「侠客博园」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/wen15191038073/article/details/128233664
上面这种虽然可以获取到div的高度,但是如果再循环中比较麻烦,我们循环出来的每个div高度都是不一样的,这样设置起来很繁琐
第二种
这一种方法是通过直接修改数据来获取高度,比如知道最小高度,然后再根据每个内容的高度依次设置高度值,下面是个简单例子
if (JSON.parse(items[0].quality).length + JSON.parse(items[1].quality).length === 1) {
items[0].minHeight = 600;
} else if (JSON.parse(items[0].quality).length + JSON.parse(items[1].quality).length === 2) {
items[0].minHeight = 650;
} else {
items[0].minHeight = 550;
}
然后循环的地方就可以取item上的minHeight
了
这种方法简单方便,有人可能会说这样还得遍历一遍数据,其实前端显示数据都不会很多,遍历一下再赋值影响微乎其微,不用考虑那么多,普通技术工人还是以实现效果为准,优化可以另外考虑
还没有任何评论,你来说两句吧