vue-virtual-scroll-list虚拟列表

当DOM中渲染的列表数据过多时，页面会非常卡顿，非常占用浏览器内存。可以使用虚拟列表来解决这个问题，即使有成百上千条数据，页面DOM元素始终控制在指定数量。

一、参考文档

https://www.npmjs.com/package/vue-virtual-scroll-list

二、引入

1. import VirtualList from 'vue-virtual-scroll-list'
3. components: {
4. 'virtual-list': VirtualList
5. }
8. :data-key="'productCode'"
9. :data-sources="productList"
10. :data-component="productItem"
11. :keeps="20"
12. style="overflow-y: auto;"
13. @scroll="(e) => watchScroll(e)"
14. ref="scrollList"
15. :extra-props="{
16. addCart
17. }"
18. >

三、参数

四、注意

1、virtual-list 组件自身必须设置为滚动区域

2、子组件引入由原 components 注册改为在 data 注册

1. import productItem from '@components/product/productItem';
3. data() {
4. return {
5. productList: [{productCode: 1, productName...}, {...}, ...], // 数据列表
6. productItem // 子组件
7. }
8. }

3、子组件商品数据统一改为 source

1. props: {
2. source: {
3. type: Object,
4. default() {
5. return {};
6. }
7. }
8. }

4、子组件不再使用$emit方式与父组件交互，将父组件方法声明在extra-props中，子组件通过props接收，需要$emit 的时候使用 props 中接收的方法

1. props: {
2. // 接收父组件方法
3. addCart: {
4. type: Function,
5. default: () => {}
6. }
7. }
9. methods: {
10. // 子组件点击加购按钮
11. clickAddCart(item) {
12. // 调用父组件加购方法
13. this.addCart(item)
14. }
15. }

5、回到顶部，虚拟列表不识别 scrollTop，使用虚拟列表特有的 scrollToIndex 或 scrollToOffset 方法回到顶部

注意：真机滑动列表过程中，页面滚动有惯性，点击回到顶部时，页面会白屏，可以在点击的时候先关闭滚动，回到顶部后再恢复

1. // 回到顶部先停止滚动，将overflow-y设置为hidden，解决滚动时回到顶部白屏问题
2. this.$refs.scrolList.$el.style['overflow-y'] = 'hidden';
3. this.$refs.scrolList.scrollToIndex(0);
4. // 回到顶部后再恢复滚动
5. this.$refs.scrolList.$el.style['overflow-y'] = 'auto';