uni-app项目实战笔记20--触底加载更多样式的实现

触底加载更多的实现有多种，这里简单记录下2种：

 1、使用骨架屏，需要到uniapp插件市场下载安装再使用：DCloud 插件市场

2、使用uniapp扩展组件：uni-app官网

uniapp插件市场简介

第1种方式：访问DCloud 插件市场，在搜索栏中输入需要的组件，并可以采取条件过滤筛选符合条件的组件：

 插件市场上有拥有众多丰富精美的组件，可以根据实际需要按需选择，如下图是部分加载中的插件：

使用uni-load-more扩展组件实现

本文重点介绍uniapp扩展组件使用uni-load-more实现加载更多的样式。

在页面顶部和底部添加一个加载更多的组件：

<!--顶部加载更多-->
<view class="loadingLayout" v-if="!classifyList.length && !noData"><uni-load-more status="loading" ></uni-load-more>
/view><!--底部加载更多-->
<view class="loadingLayout" v-if="classifyList.length || noData" ><uni-load-more :status="noData ? 'nomore':'loading'" ></uni-load-more>
</view>
<!--安全区域，防止小程序中“有更多了”跟Home键底部小黑线距离过近-->
<view class="safe-area-inset-bottom"></view>

上面的代码中添加了安全区域的样式：

.safe-area-inset-bottom{height: env(safe-area-inset-bottom);}

从而实现拉大没有更多数据与小程序中小黑线的间距，防止重合在一起：

该章节重点和难点在于条件判断，控制加载更多的样式的显示和隐藏，下面重点记录一下：

<!--顶部加载更多-->
显示条件：!classifyList.length && !noData

!classifyList.length：classifyList 是空数组（还没有数据）

!noData：noData 为 false（表示可能还有数据）

适用场景：

首次加载数据时，列表为空，且服务器可能还有数据（noData=false），此时显示“加载中”状态（status="loading"）。

隐藏条件：

如果 classifyList 有数据了（classifyList.length > 0），就不再显示顶部加载。

如果 noData=true（服务器没有更多数据了），即使 classifyList 为空，也不会显示（因为已经没有数据可加载）。

<!--底部加载更多-->
显示条件：classifyList.length || noData

classifyList.length：列表已经有数据（非空）

noData：服务器还有更多数据

隐藏条件：

只有当 classifyList 为空 且 noData=false 时，底部加载才会隐藏（此时顶部加载会显示）。

 

适用场景：

当用户滚动到底部时，检查是否还有更多数据：

如果 noData=false（还有数据），显示 status="loading"（加载中）。

如果 noData=true（没有更多数据），显示 status="nomore"（没有更多数据）。

整体逻辑总结

场景	classifyList	noData	顶部加载	底部加载	底部加载状态
初始加载（无数据）	[]	false	✅ loading	❌ 隐藏	-
加载中（已有数据，继续加载）	[data...]	false	❌ 隐藏	✅ loading	loading
加载完成（无更多数据）	[data...]	true	❌ 隐藏	✅ nomore	nomore
空数据（无更多数据）	[]	true	❌ 隐藏	✅ nomore	nomore