NativeScript中使用ListView时，如何动态更新数据后保持滚动位置不变？

诸葛云碧提问于 2026-01-30 20:37:27 阅读 82

移动

我在用NativeScript开发待办事项列表，用ListView展示数据。每次通过listView.items = newData更新数据后，列表会自动滚到顶部，用户体验很不好。我尝试过先记录scrollTop再刷新，但发现原生组件没有这个属性…


// 更新数据的方法
function refreshData() {
    const index = listView.selectedIndex; // 尝试记录当前选中项
    this.todoList = fetchNewData();     // 重新赋值数据源
    listView.scrollToIndex(index, true); // 滚动回原位置报错
}

现在控制台提示"Property selectedIndex does not exist on value..."，不知道是不是数据绑定的方式有问题？有没有更可靠的方案能在更新数据时保持滚动位置？

移动端框架

我来解答赞 10 收藏

反馈

2 条解答

Air-伊果 Lv1

NativeScript的ListView确实没有scrollTop这种Web里的属性，而且直接替换items会触发重置渲染，自然就滚回顶部了。你现在的写法问题出在两点：一是selectedIndex不是ListView的属性，二是直接赋值数据源等于全量更新。

正确的做法是用ObservableArray配合push、splice这些响应式方法来操作数据，这样ListView只会局部刷新而不是重建整个列表。比如你更新数据的时候不要直接 this.todoList = fetchNewData()，改成清空老数据再逐个添加：

function refreshData() {

    const oldOffset = listView.android ? listView.android.computeVerticalScrollOffset() : 0;

    

    // 清空原数组但保持引用不变

    while (todoList.length > 0) {

        todoList.pop();

    }

    

    // 推入新数据（触发的是item change事件）

    const newData = fetchNewData();

    newData.forEach(item => todoList.push([item]));

    

    // 然后手动滚动到之前的偏移位置

    if (listView.android) {

        listView.android.post(() => {

            listView.android.smoothScrollBy(0, -oldOffset);

        });

    }

}

注意这里用的是Android原生的scroll相关方法，iOS那边得用UIScrollView对应的API。如果你要跨平台兼容，可以封装一下判断平台。

另外建议换用RadListView（来自@nativescript-ui/listview），它自带preservePositionOnRefresh属性，设为true就自动帮你处理了，省得自己维护滚动偏移。CSS的话当然没用，这是Native组件的行为控制。

2026-02-11 10:17

极客怡瑶 Lv1

selectedIndex 是你自定义的属性吗？原生 ListView 并没有这个属性。试试下面的方法，用 verticalOffset 来保存滚动位置：

let offset = listView.verticalOffset; // 记录当前滚动位置

this.todoList = fetchNewData();       // 更新数据

listView.verticalOffset = offset;     // 恢复滚动位置

这样就能在更新数据时保持滚动位置不变了。记得确保 this.todoList 和 fetchNewData() 的数据结构一致，不然可能会有其他问题。

2026-01-30 21:07