uni-app 获取循环出来的盒子距离顶部的高度,实现点击哪个就让他滚动到顶部
时间: 2024-03-27 21:35:11 浏览: 13
你可以使用uni-app提供的选择器API来获取元素距离顶部的高度,然后使用uni-app提供的页面滚动API来实现滚动到顶部。
假设你的盒子是通过`v-for`循环出来的,你需要为每个盒子绑定一个点击事件,然后在点击事件中获取当前盒子距离顶部的高度,最后调用页面滚动API实现滚动到顶部的功能。
示例代码如下:
```html
<template>
<div>
<div v-for="(item, index) in list" :key="index" @click="scrollToTop(index)">
{{ item }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [1, 2, 3, 4, 5]
}
},
methods: {
scrollToTop(index) {
uni.createSelectorQuery()
.select(`#item-${index}`)
.boundingClientRect(rect => {
uni.pageScrollTo({
scrollTop: rect.top + uni.getSystemInfoSync().statusBarHeight
})
})
.exec()
}
}
}
</script>
```
在上面的代码中,我们使用了`uni.createSelectorQuery()`方法获取当前盒子的位置信息,然后调用`uni.pageScrollTo()`方法实现滚动到顶部的功能。由于页面滚动API的scrollTop属性是相对于页面顶部的距离,所以我们需要加上系统状态栏的高度来计算盒子距离页面顶部的高度。