聊城住房建设局网站,乐营销网站,制作古城西安网页,网站开发需要学多久当DOM中渲染的列表数据过多时#xff0c;页面会非常卡顿#xff0c;非常占用浏览器内存。可以使用虚拟列表来解决这个问题#xff0c;即使有成百上千条数据#xff0c;页面DOM元素始终控制在指定数量。 一、参考文档 
https://www.npmjs.com/package/vue-virtual-scroll-li…当DOM中渲染的列表数据过多时页面会非常卡顿非常占用浏览器内存。可以使用虚拟列表来解决这个问题即使有成百上千条数据页面DOM元素始终控制在指定数量。 一、参考文档 
https://www.npmjs.com/package/vue-virtual-scroll-list 
二、引入 
import VirtualList from vue-virtual-scroll-listcomponents: {virtual-list: VirtualList
}virtual-list:data-keyproductCode:data-sourcesproductList:data-componentproductItem:keeps20styleoverflow-y: auto;scroll(e)  watchScroll(e)refscrollList:extra-props{addCart}三、参数 
参数描述 data-sources  数据列表[数组]  data-key  列表 key 值  data-component  列表子组件  keeps  渲染最大 DOM 数量  extra-props  额外参数可传变量和方法  scroll  监听滚动事件 
四、注意 
1、virtual-list 组件自身必须设置为滚动区域 
styleoverflow-y: auto; 
2、子组件引入由原 components 注册改为在 data 注册 
import productItem from components/product/productItem;data() {return {productList: [{productCode: 1, productName...}, {...}, ...], // 数据列表productItem // 子组件}
} 
3、子组件商品数据统一改为 source 
props: {source: {type: Object,default() {return {};}}
} 
4、子组件不再使用$emit方式与父组件交互将父组件方法声明在extra-props中子组件通过props接收需要$emit 的时候使用 props 中接收的方法 
props: {// 接收父组件方法addCart: {type: Function,default: ()  {}}
}methods: {// 子组件点击加购按钮clickAddCart(item) {// 调用父组件加购方法this.addCart(item)}
} 
5、回到顶部虚拟列表不识别 scrollTop使用虚拟列表特有的 scrollToIndex 或 scrollToOffset 方法回到顶部 
this.$refs.scrollList.scrollToIndex(0);