uniapp 如何判断div距离屏幕底部距离

在uniapp中，可以使用uni.createSelectorQuery()方法来获取节点信息，并且可以使用boundingClientRect()方法获取节点的位置信息，通过这些信息可以计算出div距离屏幕底部的距离。

具体步骤如下：

1. 在页面中给需要计算距离的div设置一个id属性，例如：id="myDiv"

2. 在页面中使用uni.createSelectorQuery()方法获取节点信息，并使用boundingClientRect()方法获取节点位置信息，代码如下：

uni.createSelectorQuery().select('#myDiv').boundingClientRect(function(rect){
    console.log(rect.bottom); // 输出div距离屏幕底部的距离
}).exec();

3. 在boundingClientRect()方法的回调函数中，可以获取到节点的位置信息，其中rect.bottom表示节点底部距离屏幕顶部的距离，通过屏幕高度和该值可以计算出div距离屏幕底部的距离，例如：

uni.getSystemInfo({
  success: function (res) {
    console.log(res.windowHeight - rect.bottom); // 输出div距离屏幕底部的距离
  }
});

相关问题

uniapp 如何判断div底部距离屏幕底部距离

判断 div 底部距离屏幕底部的距离，可以使用uniapp中的`uni.getSystemInfo()`方法获取屏幕高度，再结合`uni.createSelectorQuery()`方法获取节点信息，计算出 div 底部距离屏幕底部的距离。

具体实现步骤如下：

1. 在 div 标签上添加 id 属性，例如：`<div id="myDiv"></div>`

2. 在页面中使用 `uni.createSelectorQuery()` 方法获取节点信息，并使用 `boundingClientRect()` 方法获取节点位置信息，代码如下：

uni.createSelectorQuery().select('#myDiv').boundingClientRect((rect) => {
   console.log(rect.bottom); // 输出 div 底部距离屏幕顶部的距离
}).exec();

3. 在 `boundingClientRect()` 方法的回调函数中，可以获取到节点的位置信息，其中 `rect.bottom` 表示节点底部距离屏幕顶部的距离。

4. 使用 `uni.getSystemInfo()` 方法获取屏幕高度，代码如下：

uni.getSystemInfo({
  success: function (res) {
    console.log(res.windowHeight - rect.bottom); // 输出 div 底部距离屏幕底部的距离
  }
});

5. 在 `uni.getSystemInfo()` 方法的回调函数中，可以获取到屏幕的高度，通过计算屏幕高度和 `rect.bottom` 的差值，即可得到 div 底部距离屏幕底部的距离。

uniapp 如何判断div距离底部距离

在Uniapp中，可以使用 `uni.createSelectorQuery()` 方法创建一个查询对象，然后通过 `select()` 或 `selectAll()` 方法选择要查询的元素，最后使用 `boundingClientRect()` 方法获取该元素的位置信息，再结合页面或组件的高度信息，就可以计算出该元素距离底部的距离。

例如，在模板中定义一个 `div` 元素：

<div id="my-div">Hello World!</div>

在对应的页面或组件中，可以使用以下代码获取该元素距离底部的距离：

// 获取页面或组件的高度
const windowHeight = uni.getSystemInfoSync().windowHeight

// 创建查询对象，选择要查询的元素
uni.createSelectorQuery().select('#my-div').boundingClientRect(function(rect){
  // 计算该元素距离底部的距离
  const bottomDistance = windowHeight - rect.bottom
  console.log(bottomDistance)
}).exec()

其中，`windowHeight` 表示页面或组件的高度，`rect.bottom` 表示该元素底部距离页面或组件顶部的距离，因此 `windowHeight - rect.bottom` 就是该元素距离底部的距离。