Uniapp是一个基于Vue.js的跨平台开发框架,可以将同一份代码编译成多个平台的应用程序。其中,对于不同平台的内容呈现,可能需要对其高度进行动态调整。
在Uniapp中,可以通过以下方法获取内容的高度:
- 使用uni.createSelectorQuery()方法
uni.createSelectorQuery()方法是Uniapp中获取组件信息的API之一,可以获取到组件的各种信息,包括宽度、高度、位置信息等。在获取到组件的信息后,可以使用回调函数的方式进行操作。
举例来说,如果需要获取一个view组件的高度信息,可以按照以下方式进行:
uni.createSelectorQuery().select('.view-class').boundingClientRect((rect)=>{
console.log(rect.height);
}).exec()
其中,参数'.view-class'为view组件的样式名称,.boundingClientRect()方法可以获取组件的位置和尺寸信息,callback函数(rect)为获取到的组件相关信息。
- 使用uni@v3 API
在Uniapp v3版本中,API有了较大的升级与改动,包括添加了新的API。
通过使用uni@v3 API,可以直接获取页面中的节点信息,并且可以使用await语法实现异步操作。
关于在uni@v3 API中获取高度,可以按照以下方式进行:
async function getHeight() {
const query = uni.createSelectorQuery();
await new Promise(resolve => {
query.select('.view-class').boundingClientRect();
query.exec(res => {
console.log(res[0].height);
resolve();
});
});
}
其中query.select('.view-class').boundingClientRect()语句
.........................................................