简单处理接口返回400条数据本地数据分页加载

项目特殊列表接口一口气返回400多条数据；目前手机能力页面400多数据加载是没有任何压力的；但是假设列表套了2个swiper，列表分类也给套住swiper还有一个scroll-view。列表长度就会导致列表卡顿（区域滚动的性能不及页面滚动）

把数据存在列表A，再分开page计算分类的长度列表存在B(页面渲染)。页面滑动到底部，数据截流到对应数量然后再合并；核心

javascript 复制代码

/** * 本地分页截取数据 * 
@param {Number} page 要加载的页码 */
loadPageData(page) {    
// 计算截取的起始和结束索引    
const startIndex = (page - 1) * this.pageSize;  
const endIndex = page * this.pageSize;
// 截取当前页数据
const pageData = this.totalList.slice(startIndex, endIndex);
// 刷新：重置列表；加载更多：追加列表 
if (page === 1) {        
this.showList = pageData;    
} else {
this.showList = [...this.showList, ...pageData];    
}    
// 判断是否加载完所有数据
this.noMore = this.showList.length >= this.totalList.length;
if (this.noMore) { 
  this.loadingText = '已加载全部数据';    }
},

html 复制代码

<template>    
<view class="list-page">
       <!-- 列表容器 -->       
<scroll-view class="list-scroll" scroll-y @scrolltolower="loadMore" lower-threshold="100">            <!-- 列表项 -->            
<view class="list-item" v-for="(item, index) in showList" :key="index"> 
<text class="item-title">第{{ item.id }}条数据</text>                
<text class="item-desc">{{ item.content }}</text>            
</view>            
<!-- 加载状态提示 -->            
<view class="load-status">                
<text v-if="noMore">已加载全部数据</text> 
</view>        
</scroll-view>    
</view>
</template>

javascript 复制代码

<script>    
export default {        
data() {            
return {               
 // 原始完整数据（接口返回的200条）                
totalList: [], // 渲染到页面的分页数据                
showList: [],  // 分页参数                
pageNum: 1, // 当前页码                
pageSize: 20, // 每页条数                
total: 200, // 总数据量（固定200）                
// 加载状态                
noMore: false, // 是否没有更多数据                
loadingText: '加载中...'            
};        
},        
onLoad() {            // 页面加载时先请求完整数据，再做分页            this.getTotalData();        
},        
methods: {            
/**             * 模拟请求接口获取200条完整数据             */            
getTotalData() {                // 直接生成200条模拟数据                
this.totalList = Array.from({                    
length: 200}, (_, index) => ({ id: index + 1,                    
content: `这是第${index + 1}条测试数据`}));                
// 加载第一页数据                
this.loadPageData(1);            },            
/**             * 本地分页截取数据             * @param {Number} page 要加载的页码             */            
loadPageData(page) {                // 计算截取的起始和结束索引                const startIndex = (page - 1) * this.pageSize;                
  const endIndex = page * this.pageSize;                // 截取当前页数据                const pageData = this.totalList.slice(startIndex, endIndex);               
 // 刷新：重置列表；加载更多：追加列表                
if (page === 1) {
this.showList = pageData;
} else {                    
this.showList = [...this.showList, ...pageData];}                
// 判断是否加载完所有数据                
this.noMore = this.showList.length >= this.totalList.length;              if (this.noMore) {                    
this.loadingText = '已加载全部数据';                
}            
},            
/**             * 上拉加载更多             */            
loadMore() {                
// 避免重复加载                
if (this.noMore) return;                
// 页码自增                
this.pageNum++;                
// 加载下一页数据（本地截取）                
this.loadPageData(this.pageNum);}}};
</script>
<style scoped>    
.list-page {        
height: 100vh;        
background-color: #f5f5f5;    
}    
.list-scroll {        
height: 100%;   
 }    
.list-item {        
padding: 15px;        
margin: 10px;        
background-color: #fff;        
border-radius: 8px;    }    
.item-title {        
font-size: 16px;        
font-weight: 600;        
color: #333;    
}    
.item-desc {        
font-size: 14px;        
color: #666;        
margin-top: 8px;    
}    
.load-status {        
padding: 20px;        
text-align: center;        
font-size: 14px;        
color: #999;    
}
</style>