资讯新闻 这个世界上有你想要做的事情，与你必须做的事情；有你以为的自己，与你成为的自己——跟随着你的脚步，走向它应去的地方。 ---保拉·麦克莱恩-
序
项目特殊列表接口一口气返回400多条数据；目前手机能力页面400多数据加载是没有任何压力的；但是假设列表套了2个swiper，列表分类也给套住swiper还有一个scroll-view。列表长度就会导致列表卡顿（区域滚动的性能不及页面滚动）简单处理uni-app接口返回400条数据本地数据分页加载
思路
把数据存在列表A，再分开page计算分类的长度列表存在B(页面渲染)。页面滑动到底部，数据截流到对应数量然后再合并；核心
/**
* 本地分页截取数据
* @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 = '已加载全部数据';
}
},
整体代码
index.vue
<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>
<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>