uni-app 希望 app 的 scroll-view 也支持 scroll-anchoring
uni-app 希望 app 的 scroll-view 也支持 scroll-anchoring
8 回复
更网速没有关系，列表是v-for 循环出来的，每次会整体渲染，如果是下拉加载滚动条的位置不会变，上拉加载就会重置滚动条，而且不能提前设置滚动条的scrollTop设置scroll-into-view也一样，必须v-for渲染完成后在this.$nextTick中设置滚动条位置，导致<scroll-view/>会闪屏，而且列表<image/>也是每次重新获取没有使用缓存
在 uni-app 中，scroll-view 组件默认并不支持 scroll-anchoring 特性。scroll-anchoring 是一种浏览器行为，用于在内容动态变化时保持用户的滚动位置，避免页面跳动。虽然 uni-app 的 scroll-view 组件本身不支持这个特性，但你可以通过一些手动的方式来实现类似的效果。
实现思路
- 监听内容变化：当
scroll-view中的内容发生变化时，记录当前的滚动位置。 - 动态调整滚动位置：在内容变化后，根据之前记录的滚动位置，动态调整
scroll-view的滚动位置，以保持用户的视觉焦点。
示例代码
以下是一个简单的示例，展示如何在 uni-app 中手动实现类似 scroll-anchoring 的效果：
<template>
<view>
<scroll-view
:scroll-y="true"
:style="{ height: '100vh' }"
@scroll="handleScroll"
ref="scrollView"
>
<view v-for="(item, index) in items" :key="index" class="item">
{{ item }}
</view>
</scroll-view>
<button @click="addItem">Add Item</button>
</view>
</template>
<script>
export default {
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3'],
scrollTop: 0,
};
},
methods: {
handleScroll(event) {
this.scrollTop = event.detail.scrollTop;
},
addItem() {
this.items.push(`Item ${this.items.length + 1}`);
this.$nextTick(() => {
this.$refs.scrollView.scrollTop = this.scrollTop;
});
},
},
};
</script>
<style>
.item {
padding: 20px;
border-bottom: 1px solid #ccc;
}
</style>