【uniapp】列表、下拉刷新、上拉加载

uniapp之列表、下拉刷新、上拉加载

---

1.在nvue页面中

主要是利用 app的nvue专用组件来完成一个整体的功能

参考案例

新闻/资讯应用模板（ps：案例中使用uni-list和uni-list-item推荐看组件源码，这样能更好理解整个使用方式）

优点

• 原生列表。 适合做长列表，性能高，对不可见部分的渲染资源回收有特殊的优化处理 。
• 各项功能组件化。由此体现出来功能设置非常灵活，强大的自定义能力。

缺点

• 开发上需要接受nvue的限制
• 强大的自定义和灵活性导致整体使用上复杂度高，并不能做到简单的接口调用（推荐封装使用）

使用场景

• 复杂场景，对性能比较高的地方

2.scroll-view

scroll-view , 区域级别的滚动。有提供丰富上拉、下拉、各项钩子函数。

优点

• 非常丰富的API
• 区域级别的滚动，使用上面很灵活，通常用在页面局部区域
• 提供了几种预设样式

缺点

• 区域级别的刷新, 在复杂的长列表下面会有性能问题

使用场景

顶部选项栏

3.页面自带的下拉、上拉

页面生命周期 , 每个页面自带有上拉和下拉 ,体现为页面的钩子函数.

具体配置请看这里下拉刷新相关配置

优点

• 相比scroll-view的区域级滚动，页面级别的滚动列表性能要好
• 无需引入多余的代码，接口简单，作为生命周期直接提供给开发者使用
• 可以自定义下拉刷新样式, 提供了几种预设样式

缺点

• 正是因为简单，所以自定义能力不够强，下拉样式不能做复杂logo和图形, 如果有这种需求推荐考虑nvue组件实现
• 上拉和下拉功能是以一个页面为基本单位的，不能做到细致化的滚动

使用场景

单页面列表 (或者是以单个页面为基本的需求)

##4.前端模拟列表

主要来源是插件市场的各种前端模拟下拉刷新方案

优点

• 熟悉的开发方式
• 超强大的自定义能力

缺点

• 性能上来看相比其他几个要查
• 下拉刷新可能会因为使用了部分原生组件而失效的问题 (比如层级上被覆盖)

5.特殊案例

插件市场的mescroll-uni , 这个插件使用量极高(但还是不支持nvue)