|
前言股票热门榜单有4000多条，渲染到页面上在盘中时还得实时更新，如果采用接口和分页，当下拉几十页的时候页面会变的越来越卡并且还得实时更新，最后的做法是一开始数据就从ws传递过来，我们只需要传起始下标和结束下标即可，在页面上我们也只生成几个标签。大大减轻了渲染压力。
什么是虚拟列表？
就只指渲染可视区域内的标签，在滚动的时候不断切换起始和结束的下标来更新视图，同时计算偏移。
demo效果
准备工作 - 计算一屏可展示多少个列表。
- 盒子的高度。
- 滚动中起始位置。
- 滚动中结束位置。
- 滚动偏移量。
屏高&盒子高度在小程序中我们可以利用wx.createSelectorQuery来获取屏高以及盒子的高度。 getEleInfo( ele ) { return new Promise( ( resolve, reject ) => { const query = wx.createSelectorQuery().in(this); query.select( ele ).boundingClientRect(); query.selectViewport().scrollOffset(); query.exec( res => { resolve( res ); }) })},this.getEleInfo('.stock').then( res => { if (!res[0]) retuen; // 屏高 this.screenHeight = res[1].scrollHeight; // 盒子高度 this.boxhigh = res[0].height;})起始&结束&偏移 onPageScroll(e) { let { scrollTop } = e; this.start = Math.floor(scrollTop / this.boxhigh); this.end = this.start + this.visibleCount; this.offsetY = this.start * this.boxhigh; }scrollTop可以理解为距离顶部滚过了多少个盒子 / 盒子的高度 = 起始下标 起始 + 页面可视区域能展示多少个盒子 = 结束
下载地址:
vue+elementUI实现内嵌table的方法示例
js中toString方法3个作用 |
