动态设置style属性

grtjh203

于 2023-05-26 16:55:24 发布

阅读量855

点赞数

文章标签：数学建模

本文链接：https://blog.youkuaiyun.com/qq_59297167/article/details/130890282

版权

本文介绍了在uniapp中如何动态调整元素样式，基于数据变量`mainHeight`和元素查询选择器`selectorQuery`来获取`.myContent`元素的高度。通过`uni.getSystemInfoSync()`获取窗口高度，然后使用`boundingClientRect`方法来获取指定元素的尺寸信息，实现对元素高度的精确控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

:style="[{position:(data>mainHeight)?'':'fixed'},{bottom:(data>mainHeight)?'':'110rpx'}]"

多个变量根部布尔值来判断。

<div :style="{height: divHeight, width: divWidth}">

在data中定义一个变量，里面可以写属性值。

uniapp获取视口和元素的高度值

this.mainHeight = uni.getSystemInfoSync().windowHeight;
const query = uni.createSelectorQuery().in(this);
 query.select('.myContent').boundingClientRect(data => {
this.data=data.height
 console.log(".myContent的高度---",data)
}).exec();
//可以获取data的height值即是元素的高度。