uniapp实时获取页面内容距底部的高度
时间: 2023-08-06 22:10:07 浏览: 41
你可以通过uni-app提供的API来获取当前页面的滚动高度,以及页面的总高度,然后计算出当前页面内容距离底部的高度。具体实现可以参考以下代码:
```javascript
// 获取页面滚动高度
let scrollTop = uni.getStorageSync('scrollTop');
// 获取页面总高度
uni.createSelectorQuery().selectViewport().boundingClientRect(data => {
let scrollHeight = data.scrollHeight;
let windowHeight = uni.getSystemInfoSync().windowHeight;
// 计算当前页面内容距离底部的高度
let bottomHeight = scrollHeight - scrollTop - windowHeight;
console.log('距离底部高度:', bottomHeight);
}).exec();
```
其中,`uni.getStorageSync('scrollTop')`可以获取到页面滚动的高度,`uni.createSelectorQuery().selectViewport().boundingClientRect()`可以获取到当前页面的总高度和窗口高度。然后再通过计算,就可以得到当前页面内容距离底部的高度了。
相关问题
uniapp获取页面内容距离底部的距离
你可以使用uniapp提供的API:uni.getSystemInfoSync()和uni.createSelectorQuery()来获取页面内容距离底部的距离。具体实现方式如下:
1. 首先使用uni.getSystemInfoSync()获取屏幕高度 screenHeight 和屏幕宽度 screenWidth。
```
let res = uni.getSystemInfoSync();
let screenHeight = res.windowHeight; // 屏幕高度
let screenWidth = res.windowWidth; // 屏幕宽度
```
2. 然后使用uni.createSelectorQuery()获取页面内容的高度 contentHeight 和距离底部的距离 bottomDistance。
```
uni.createSelectorQuery().select('#content').boundingClientRect(function(rect) {
let contentHeight = rect.height; // 内容高度
let bottomDistance = screenHeight - rect.bottom; // 距离底部的距离
}).exec();
```
其中,#content是你要获取高度和距离的页面内容的选择器,可以根据实际情况更改。
uniapp 获取最底部高度
可以使用uni.getSystemInfoSync()获取系统信息,再通过uni.createSelectorQuery()获取页面节点信息,最后计算出最底部的高度。
示例代码:
```
// 获取系统信息
const systemInfo = uni.getSystemInfoSync()
// 创建选择器
const query = uni.createSelectorQuery()
// 获取页面节点信息
query.select('.page').boundingClientRect()
// 计算最底部的高度
query.exec((res) => {
const pageHeight = res[0].height
const bottomHeight = systemInfo.windowHeight - res[0].bottom
console.log(`最底部高度为:${bottomHeight}`)
})
```