小程序scroll-view在苹果手机会自动触底 uni-app
小程序scroll-view在苹果手机会自动触底 uni-app
示例代码：
<scroll-view scroll-y style="height: 100%" scroll-anchoring scroll-with-animation enable-back-to-top
refresher-enabled :refresher-threshold="100" :refresher-triggered="isRefresher"
@refresherrefresh="onRefresherrefresh" :lower-threshold="200" @scrolltolower="getMoreList"></scroll-view>
操作步骤：
- 苹果手机，进入列表页面，视图会停留在第一页最后的列表数据，然后会自动加载第二页
预期结果：
- 进入列表页面，滚动条应该在最顶部并且只加载第一页数据
实际结果：
- 进入列表页面，会自动滚动到第一页最后一条数据并且加载了第二页数据
bug描述：
- 列表中使用scroll-view，滚动触底会加载下一页，但是在苹果手机上一进入页面没有手动滚动，但是会自动触底加载下一页
更多关于小程序scroll-view在苹果手机会自动触底 uni-app的实战教程也可以访问 https://www.itying.com/category-93-b0.html
1 回复
更多关于小程序scroll-view在苹果手机会自动触底 uni-app的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这个现象是iOS上scroll-view的一个常见问题，主要是由于scroll-anchoring属性导致的。解决方案如下：
- 最简单的办法是移除scroll-anchoring属性：
<scroll-view scroll-y style="height: 100%" scroll-with-animation>
- 如果确实需要scroll-anchoring功能，可以尝试在onLoad生命周期中重置滚动位置：
onLoad() {
this.$nextTick(() => {
uni.pageScrollTo({
scrollTop: 0,
duration: 0
});
});
}
- 也可以考虑在mounted钩子中延迟加载数据：
mounted() {
setTimeout(() => {
this.loadData();
}, 100);
}