uni-app中scroll-view重新刷新后@scroll的滚动位置不是0
时间: 2024-09-13 14:16:24 浏览: 47
uniapp scroll-view 横向和纵向滚动 带滚动回调
在uni-app中,`scroll-view` 组件提供了滚动视图的功能。当使用 `@scroll` 事件监听滚动位置时,如果遇到重新刷新后滚动位置不是0的问题,这通常是由于组件的滚动状态没有被正确重置导致的。
要解决这个问题,可以采取以下几种方法:
1. 清除滚动状态:可以在数据对象中添加一个控制滚动位置的变量,每次刷新页面或组件时,将这个变量重置为0,然后赋值给 `scroll-view` 的 `scroll-top` 属性。
```html
<scroll-view scroll-y style="height: 350px;" :scroll-top="scrollTop">
<!-- 内容 -->
</scroll-view>
```
```javascript
export default {
data() {
return {
scrollTop: 0 // 初始化滚动位置为0
}
},
methods: {
refreshScrollView() {
this.scrollTop = 0; // 刷新时重置滚动位置为0
}
}
}
```
2. 使用组件的内置方法:`scroll-view` 提供了 `scroll-into-view` 属性,可以将页面滚动到指定的子组件的位置,确保滚动视图重置。
```html
<scroll-view scroll-y style="height: 350px;" scroll-into-view="targetId">
<!-- 内容 -->
<view id="targetId">目标位置</view>
</scroll-view>
```
3. 页面全局刷新:如果是在页面级别刷新,确保在页面加载时调用方法来重置滚动位置。
```javascript
export default {
onReady() {
this.resetScrollView();
},
methods: {
resetScrollView() {
this.scrollTop = 0; // 页面准备好后重置滚动位置为0
}
}
}
```
在实现时,确保在适当的生命周期钩子中调用重置滚动位置的方法,比如页面或组件的 `mounted` 或 `onReady` 钩子。
阅读全文