uniapp之列表、下拉刷新、上拉加载
本文最后更新于 1724 天前,其中的信息可能已经有所发展或是发生改变。

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)


感谢 李坤泉 前端大佬的投稿…

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇