一：为什么要实现加载更多
因为虽然目前可能软件或者项目中的数据不多，可能也就十多行，但是如果随着项目的不断扩大，其对应的数据也成百上千的增加，如果我们还是按照原来那样一次性的将所有数据请求回来。这种会出现以下问题。
- 用户体验感较差。加载更多顾名思义就是分页获取数据，然后将分页获取的数据又统一的放入到页面中展示数据。因此分页加载可以将大量数据分批加载，避免一次性加载过多数据导致页面卡顿或加载时间过长。通过分页加载，可以快速展示初始数据，并且在需要时按需加载更多数据，从而提升用户的交互体验和页面加载速度。
- 减轻服务区的压力。即如果我们一次性的请求十多万行数据，那么这样就会导致服务器承受的压力很大。官方的回答即一次性加载所有数据，特别是当数据量庞大时，会给服务器带来很大的压力。而通过分页加载，可以将数据分批获取，减轻服务器的负载，提高系统的性能和稳定性。
-
支持滚动无限加载：分页加载为实现滚动无限加载提供了基础。当用户滚动到页面底部时，自动加载下一页数据，实现无缝的数据展示，使用户可以连续浏览数据而无需手动触发加载操作。
二：如何在uniapp中实现触底加载更多
首先我们要明确一点，即如何判断用户触底了，这样我们就好通过用户触底从而发送相对应的请求。这里我们针对的是一种需求：即左侧为菜单栏，右侧为菜单栏中所对应的数据，其中要求左侧菜单栏固定，右侧实现触底加载更多。其中如下：
这里我们可以将其分为左右两部分，左边就是宽度固定，右侧实现下拉加载。下面是完成该功能的代码。如果用于实际项目中的话，我们可以将对应的下拉刷新所添加的数据转化为真实数据。
<template>
<view>
<!-- 分类页面 -->
<view class="cate-container">
<!-- 左边的滚动部分 -->
<view class="cate-left" :style="{height: wh+'px'}">
<scroll-view scroll-y style="height: 100%;">
<view class="cate-left-item" v-for="(item,index) in cateList" :key="item.cat_id"
@click="changeActive(index)">{
{item.cat_name}}
</view>
</scroll-view>
</view>
<!-- 右边部分 -->
<view class="cate-right" :style="{height: wh+'px',width:ww - 120 + 'px'}">
<scroll-view scroll-y @scrolltolower="lower" @scrolltoupper="refresh" style="height: 100%;" refresher-enabled="true">
<!-- 二级分类 -->
<view class="cate-right-item" v-for="(item,index) in cateDetail" :key="index">
<view class="cate-right-item-title">
{
{item.cat_name}}
</view>
</view>
<u-empty text="所谓伊人，在水一方" mode="list"></u-empty>
<u-loadmore :status="status" style="height: 20px;" />
<view class="zhanwei" style="height: 2px;">
</view>
</scroll-view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
status: 'loadmore',
// 窗口高度
wh: 0,
ww: 0,
// 左侧列表数据
cateList: [{
cat_id: '1',
cat_name: '12123123'
},
{
cat_id: '2',
cat_name: '12123123123'
},
{
cat_id: '3',
cat_name: '12213'
},
{
cat_id: '4',
cat_name: '12123'
},
{
cat_id: '5',
cat_name: '12123'
},
{
cat_id: '6',
cat_name: '1212321'
},
{
cat_id: '7',
cat_name: '12123123'
},
{
cat_id: '8',
cat_name: '12213'
},
{
cat_id: '9',
cat_name: '12123'
},
{
cat_id: '10',
cat_name: '12123'
},
{
cat_id: '11',
cat_name: '1212321'
},
{
cat_id: '12',
cat_name: '12123123'
},
{
cat_id: '13',
cat_name: '12123'
},
{
cat_id: '14',
cat_name: '12123'
},
{
cat_id: '15',
cat_name: '1212321'
},
{
cat_id: '16',
cat_name: '12123123'
},
],
// 左侧选中
active: 0,
// 右侧内容
cateDetail: [{
cat_id: '1',
cat_name: '12123123'
}, {
cat_id: '1',
cat_name: '12123123'
}, {
cat_id: '1',
cat_name: '12123123'
}, {
cat_id: '1',
cat_name: '12123123'
}, {
cat_id: '1',
cat_name: '12123123'
}, {
cat_id: '1',
cat_name: '12123123'
}, {
cat_id: '1',
cat_name: '12123123'
}, {
cat_id: '1',
cat_name: '12123123'
}, {
cat_id: '1',
cat_name: '12123123'
}, {
cat_id: '1',
cat_name: '12123123'
}, {
cat_id: '1',
cat_name: '12123123'
}, {
cat_id: '1',
cat_name: '12123123'
}, {
cat_id: '1',
cat_name: '12123123'
}, {
cat_id: '1',
cat_name: '12123123'
}, {
cat_id: '1',
cat_name: '12123123'
}, {
cat_id: '1',
cat_name: '12123123'
}, {
cat_id: '1',
cat_name: '12123123'
}, {
cat_id: '1',
cat_name: '12123123'
}, {
cat_id: '1',
cat_name: '12123123'
}, {
cat_id: '1',
cat_name: '12123123'
}, {
cat_id: '1',
cat_name: '12123123'
}]
};
},
methods: {
lower() {
let item = [{
cat_id:'123123',
cat_name: 'wuwu'
}]
this.status = 'loading'
setTimeout(()=>{
this.cateDetail.push(...item)
this.status = 'loadmore'
},1500)
}
},
onLoad() {
uni.getSystemInfo({
success: (sysInfo) => {
// 为 wh 赋值（windowHeight，可使用窗口高度）
this.wh = sysInfo.windowHeight
this.ww = sysInfo.windowWidth
console.log(this.wh, this.ww)
}
})
}
}
</script>
<style lang="scss">
page {
background-color: $uni-bg-color-grey;
}
.cate-container {
display: flex;
.cate-left {
width: 240rpx;
.cate-left-item {
display: flex;
justify-content: center;
align-items: center;
height: 120rpx;
background-color: #c00000;
font-size: 24rpx;
// 选中样式
&.active {
display: flex;
justify-content: space-between;
background-color: #fff;
&::before {
content: '';
width: 6rpx;
height: 60rpx;
background-color: #c00000;
}
// 右边白线
&::after {
content: '';
width: 6rpx;
height: 60rpx;
background-color: #fff;
}
}
}
}
.cate-right {
padding: 0 20rpx;
.cate-right-item {
.cate-right-item-title {
display: flex;
justify-content: center;
font-weight: bold;
font-size: 24rpx;
padding: 20rpx 0;
margin-bottom: 10rpx;
background-color: blue;
}
}
}
}
</style>还有一点处理小技巧，如果我们通过触底来将分页中的当前页++的话，可能就会出现用户触底后会滚又触地，导致我们请求没返回又发送相关请求，从而导致页面数据出错。我们可以通过展示数据的长度/分页的大小 ++ 这种形式。即使我们多次下拉触底。如果没有返回数据，则当前对应项的当前页仍然是正确的。不会出现请求错误的形式。
当然这种利用 scroll-view 来完成的触底加载，我们也可以通过uniapp中的生命周期也能完成这种效果。