uniapp 滚动到元素指定位置
时间: 2023-09-05 07:07:52 浏览: 198
你可以使用 `uni-page-scroll-to` 组件来实现滚动到指定位置。首先给要滚动到的元素设置一个 id,然后在触发滚动的事件中调用 `uni-page-scroll-to` 组件的 `scrollTo` 方法即可。
示例代码如下:
```html
<template>
<view>
<button @click="scrollToElement">滚动到元素</button>
<view style="height: 1000px;">
<!-- 要滚动到的元素 -->
<view id="target-element" style="height: 200px;">滚动到这里</view>
</view>
</view>
</template>
<script>
export default {
methods: {
scrollToElement() {
// 获取要滚动到的元素的位置信息
uni.createSelectorQuery().select('#target-element').boundingClientRect(rect => {
// 调用 uni-page-scroll-to 组件的 scrollTo 方法进行滚动
uni.pageScrollTo({
scrollTop: rect.top, // 滚动到元素顶部
duration: 300 // 滚动动画时长
})
}).exec()
}
}
}
</script>
```
在这个示例中,当点击按钮时会滚动到 id 为 `target-element` 的元素。你可以根据实际情况修改代码。
阅读全文