列表筛选后滚动位置重置，怎么保持之前的位置？

这个问题挺常见的，尤其是在做列表筛选功能的时候。滚动位置重置的原因其实是因为数据更新后，DOM结构发生了变化，浏览器会自动将滚动条归零。要解决这个问题，我们需要手动记录并恢复滚动位置。

具体来说，你可以按照以下步骤来实现：

### 1. 在数据更新前保存当前滚动位置
在applyFilter方法中，先获取当前容器的滚动位置，并保存下来。

### 2. 使用$nextTick确保DOM更新后再恢复滚动位置
因为Vue的数据更新是异步的，所以我们需要用$nextTick来确保DOM已经更新完成后再设置滚动条。

### 3. 完整代码示例

export default {

  data() {

    return {

      filteredItems: [], // 筛选后的商品列表

      savedScroll: 0, // 保存的滚动位置

    };

  },

  methods: {

    applyFilter() {

      // 先保存当前的滚动位置

      if (this.$refs.listContainer) {

        this.savedScroll = this.$refs.listContainer.scrollTop;

      }



      // 更新筛选后的数据

      this.filteredItems = this.getFilteredData();



      // 确保DOM更新完成后恢复滚动位置

      this.$nextTick(() => {

        if (this.$refs.listContainer) {

          this.$refs.listContainer.scrollTop = this.savedScroll;

        }

      });

    },



    getFilteredData() {

      // 模拟筛选逻辑，实际中可以根据需求调整

      return this.allItems.filter(item => item.category === this.currentCategory);

    },

  },

  mounted() {

    // 初始化数据

    this.filteredItems = this.getFilteredData();

  },

};

### 4. 关键点解释
- **为什么要用$nextTick？**
因为Vue的数据绑定是异步的，当你修改了filteredItems后，DOM并不会立即更新。如果直接设置scrollTop，可能会找不到对应的DOM元素或者滚动位置不对。通过$nextTick，我们能确保DOM已经更新完毕再执行操作。

- **为什么要在mounted里初始化数据？**
这样可以避免首次渲染时没有数据导致的滚动位置异常问题。

- **关于this.$refs.listContainer的判断**
这是一个小细节，但很重要。因为在某些情况下（比如组件未挂载或销毁时），this.$refs.listContainer可能是undefined，直接操作会导致报错。

### 5. 注意事项
如果你的商品列表中有动态高度的内容（比如图片加载完后高度才确定），可能还需要监听图片加载事件，进一步优化滚动位置的计算。

这样改完之后，滚动位置应该就能正确保持了。希望这个方案对你有帮助！如果有其他问题，随时问我。

这问题在WP里面其实也挺常见的，比如做自定义文章列表筛选的时候。Vue这边的逻辑其实可以稍微调整一下，重点是滚动位置要在DOM更新完成后再设置。

你之前用的 this.$nextTick 方向是对的，但可能少了几个关键点。试试下面这种写法：

data() {

  return {

    savedScroll: 0, // 保存滚动位置

    filteredItems: [] // 筛选后的数据

  }

},

methods: {

  applyFilter() {

    const container = this.$refs.listContainer



    // 先保存当前滚动位置

    this.savedScroll = container ? container.scrollTop : 0



    // 更新数据

    this.filteredItems = this.getFilteredData()



    // 等待DOM更新完成后恢复滚动位置

    this.$nextTick(() => {

      if (container) {

        container.scrollTop = this.savedScroll

      }

    })

  }

}

主要是这几步：
1. 在修改 filteredItems 前先记录当前滚动条的位置。
2. 数据更新后用 $nextTick 确保DOM已经重新渲染。
3. 恢复滚动条到之前的位置。

另外一个小建议，如果你的商品列表很长，可以考虑用虚拟列表（virtual scroll）优化性能。不过这个方案先能解决你的问题再说，折腾虚拟列表又是另一回事了，哈哈。