首页 » JavaScript » 正文

uniapp如何动态修改每个view div的高度?

2024-1-23 ·  1,007 views  ·  0 replies 

两种办法:

第一种
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
这种方法简单方便,有人可能会说这样还得遍历一遍数据,其实前端显示数据都不会很多,遍历一下再赋值影响微乎其微,不用考虑那么多,普通技术工人还是以实现效果为准,优化可以另外考虑

«上一篇: :下一篇»
  1. 还没有任何评论,你来说两句吧

Leave a reply