如何解决uniapp列表页分页加载更多导致长列表占用内存出现性能问题?
网友回复
<template> <view class="sickBody"> <scroll-view scroll-y="true" class="scroll-Y" @scroll="scroll" @scrolltolower="getend"> <view class="parentDom"> <!-- <view :style="{ height: sickAllList.length * 40 + 'px' }"></view> --> <view :style="{ height: screenHeight + 'px' }"></view> <view class="positionRelative" :style="{ transform: getTransform }"> <view v-for="item in visibleData" :key="item.id" class="height40" >{{ item.name }}</view> </view> </view> </scroll-view> </view> </template> <script> let testdata = []; let num = 30; let starti = 0; const getfakedata = function() { for (let i = starti; i < num; i++) { testdata.push({ id: i, name: '疾病' + i }); } starti = num; num = num + 30; console.log(testdata); } getfakedata(); import { throttle } from '@/utils/throttle'; //防抖 export default { props: { // 是否展示搜索按钮 listData: { type: Array, default: () => [] }, itemSize: { type: Number, default: 40 } }, data() { return { startOffset: 0, start: 0, end: 20, scrollTData: 0, count: 20, remain: 8 // testData: [] }; }, computed: { listHeight() { return testdata.length * this.itemSize; }, screenHeight() { return testdata.length * Number(this.itemSize) + 100; }, // 前面预留几个 prevCount() { return Math.min(this.start, this.remain); }, // 后面预留几个 nextCount() { return Math.min(this.remain, this.end); }, getTransform() { return `translate3d(0,${this.startOffset}px,0)`; }, visibleData() { return testdata.slice(this.start, Math.min(this.end, testdata.length)); } }, mounted() { this.sickAllList = testdata; }, methods: { getend() { this.getdata(); }, getdata: throttle(function() { getfakedata(); this.sickAllList = testdata; }, 800), scroll(e) { this.scrollTData = e.target.scrollTop; this.scrollThrottle(); }, /* eslint-disable */ scrollThrottle: throttle(function() { let scrollTop = this.scrollTData; // e.target.scrollTop; // 此时的开始索引 this.start = Math.floor(scrollTop / this.itemSize) - this.prevCount >= 0 ? Math.floor(scrollTop / this.itemSize) - this.prevCount : 0; // 此时的结束索引 this.end = Number(this.start) + Number(this.count) + Number(this.nextCount); // 此时的偏移量 // console.log('位置', this.start, this.end); this.startOffset = Number(this.start) * Number(this.itemSize); }, 0) } }; </script> <style lang="scss"> .sickBody { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #f4f4f4; z-index: 99; } .infinite-list-container { height: 100%; overflow: auto; position: relative; -webkit-overflow-scrolling: touch; } .infinite-list-phantom { position: absolute; left: 0; top: 0; right: 0; z-index: -1; } .infinite-list { left: 0; right: 0; top: 0; position: absolute; text-align: center; } .infinite-list-item { padding: 10px; color: #555; box-sizing: border-box; border-bottom: 1px solid #999; } .scroll-Y { height: 100%; overflow-y: scroll; } .height40 { height: 39px; line-height: 39px; width: 100%; overflow: hidden; border-bottom: 1px solid #d2d2d2; } .positionRelative { width: 92%; margin: 0 3%; position: absolute; left: 0; top: 0; font-size: 32rpx; padding-bottom: 300rpx; // height: 100%; // width: 100%; } .parentDom { position: relative; } </style>
throttle.js代码请查看http://ask.bfw.wiki/question/16807885411913820019.html