uniapp元素距离顶部距离
时间: 2023-12-29 09:26:10 浏览: 190
基于uniapp的sticky吸顶示例
获取元素距离顶部的高度可以使用uniapp的createSelectorQuery方法和boundingClientRect方法来实现。具体步骤如下:
1. 在mounted生命周期函数中,使用uni.getSystemInfo方法获取当前屏幕的高度。
2. 使用uni.createSelectorQuery方法创建一个查询对象。
3. 使用query.select方法选择需要获取距离顶部距离的元素,并传入元素的类名或id。
4. 使用boundingClientRect方法获取元素的位置信息。
5. 在query.exec方法的回调函数中,通过res参数获取到元素距离顶部的距离。
以下是一个示例代码:
```javascript
mounted() {
let that = this;
uni.getSystemInfo({
success: resu => {
const query = uni.createSelectorQuery();
query.select('.swiper').boundingClientRect();
query.exec(res => {
console.log('swiper距离页面顶部的距离', res[0].top);
});
},
fail: res => {}
});
}
```
阅读全文