聊城住房建设局网站,乐营销网站,制作古城西安网页,网站开发需要学多久当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);
