uniapp,js使用setup,scroll-view设置内部table回到顶部
时间: 2023-12-22 16:06:12 浏览: 21
要在 UniApp 中使用 setup 函数,可以在页面或组件中的 script 标签中使用,如下所示:
```html
<script>
export default {
setup() {
// 在这里编写你的 setup 逻辑
}
}
</script>
```
要将 scroll-view 内部的 table 回到顶部,你可以使用 scroll-view 的 `scroll-top` 属性来控制滚动位置。首先,给 scroll-view 组件添加一个 id,例如 `scroll-view`:
```html
<scroll-view id="scroll-view" scroll-top="0" scroll-y>
<!-- 这里是你的 table 内容 -->
</scroll-view>
```
然后,在 setup 函数中,通过 `uni.createSelectorQuery()` 获取到 scroll-view 组件的实例,然后使用 `scrollTo()` 方法将滚动位置设置为 0,即回到顶部:
```javascript
import { onMounted } from 'vue';
export default {
setup() {
onMounted(() => {
const query = uni.createSelectorQuery();
query.select('#scroll-view').scrollOffset((rect) => {
uni.pageScrollTo({
scrollTop: rect.scrollTop,
duration: 300
});
}).exec();
});
}
}
```
上述代码中使用了 Vue 3 中的 `onMounted` 钩子函数,用于在页面加载完成后执行滚动逻辑。`uni.createSelectorQuery()` 可以获取到指定 id 的组件实例,并通过 `scrollOffset()` 获取滚动位置信息。然后使用 `uni.pageScrollTo()` 方法将滚动位置设置为 0,并指定动画过渡时间为 300ms。
这样,当页面加载完成后,table 内容会自动回到顶部。注意,需要在 `setup` 函数中引入 `onMounted` 钩子函数,并确保 Vue 3.x 版本才能使用。