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)
感谢 李坤泉 前端大佬的投稿...