【nvue】分段滚动长列表相关问题

最新推荐文章于 2024-12-24 18:38:48 发布

原创最新推荐文章于 2024-12-24 18:38:48 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

11 篇文章

订阅专栏

uni-app

3 篇文章

订阅专栏

本文详细介绍了如何在uni-app的nvue中实现分段滚动长列表，包括下拉刷新、触底加载和复杂排版效果。通过使用原生渲染引擎nvue，提升了列表性能，减少了资源占用。文章强调了nvue的长列表性能优化、自定义下拉刷新和触底加载，以及区域滚动和吸顶效果的实现，并提供了相关组件的使用注意事项和实现步骤。

文章目录

下拉刷新
触底加载
分段滚动长列表
- 页面结构

首先参考文档为uni-app官方文档和weex官方文档。

吐槽一下，可能是因为有 weex 官方文档的存在，uni-app 在 nvue 这块有些文档写的很简洁 =。=

nvue 是 uni-app 基于 weex 改进的原生渲染引擎，全称为 native vue，简称 nvue。在学习伊始我忽视了 nvue 的重要性，初次运行大量的爆红让我退缩了（没有认真读文档T T），导致后期重构代码。

重点来了，nvue 有哪些是让我认为是很重要的功能呢？如下：

长列表性能高，资源占用少
可自定义的、高性能的、原生下拉刷新和触底加载
可实现区域滚动长列表+左右拖动列表+吸顶的复杂排版效果

请注意第三点，这个是我最看重的功能，后面会有我专门对他的讲解。

下拉刷新

注意：这里仅讲 nvue 如何实现下拉刷新，对下拉刷新详细的叙述在另一篇文章。

页面结构

在页面的 <list> 标签中添加 <refresh> 标签，否则不会触发下拉刷新。
方法

触发下拉刷新的方法是一个名叫 onPullDownRefresh 的生命周期钩子函数。在这个函数中执行数据请求，请求成功/失败时调用 uni.stopPullDownRefresh() 方法关闭下拉加载动画（状态）。
样式

第一种：完全自定义样式可以参考 weex 官方文档。

第二种：借助 uni-app 简单自定义样式可以通过修改 pages.json 文件实现，方法如下：

在 pages.json 中修改：
```
		{
			"path": "pages/shoot-friend/detail/index",
			"style": {
				"navigationBarTitleText": "",
				+ "app-plus": {
				+ 	"pullToRefresh": {
				+ 		"support": "true",
				+ 		"offset": "25px",
				+ 		"style": "circle",
				+ 		"color": "#18191D"
				+ 	}
				+ }
			}

		}, 
```
解析：

support 必填，表示应用该样式。

offset 选填，表示下拉刷新动画从顶部多少距离出现，通常用于自定义 topbar 的页面。

style 必填，参数写 circle 表示应用系统预设的圆形加载样式，另一种是没有样式。

color 选填，如果是 circle 样式，表示剪头的颜色。

注意：如果使用第二种方法，<refresh> 标签中不能有内容。

触底加载

注意：这里仅讲 nvue 如何实现下拉刷新，对下拉刷新详细的叙述在另一篇文章。

这里不建议使用 weex 的 <loading> 标签，因为我没有成功过…

这里使用的是 <list> 标签的 loadmoreoffset 属性和 @loadmore 方法。

loadmoreoffset 属性表示距离页面底部多少距离调用 @loadmore 方法
@loadmore 方法绑定触底加载的方法，内容为防止方法重复调用和数据请求，再或者是数据加载状态的提示。

分段滚动长列表

可实现区域滚动长列表+左右拖动列表+吸顶的复杂排版效果

大家一开始在读到它的时候可能忽视它，这是什么玩意？不清楚没关系，有个东西大家一定会写，那就是渲染数据长列表。比如：B站的动态列表、淘宝的商品列表、朋友圈的列表。

如果数据很少、列表很短，怎么写都没关系。但是如果数据量大了、图片多了、组件复杂了，就要考虑它的性能了。这里我们首先就会想到如何将整个页面的性能提升上去，然后是图片的压缩、数据的截取之类。

那么第一步，如何优化整个页面的性能呢？答案就是使用原生渲染的nvue页面，同时使用专门用来渲染长列表的<list>组件。而这里我做的不仅是优化性能，还要实现一定方式的页面排版。

我这里不知道它的学名叫什么，暂且叫他分段滚动长列表好了。简言之，它是所有主流 APP 都有的一种排版效果，我认为它是一个必啃的骨头。

具体效果请看该项目（IOS）：JXCategoryView

是不是被惊艳到了？别急，uni-app 已经实现了，并且发布在自家的插件市场，插件市场链接。github也有，GitHub链接。再次吐槽，uni-app 的文档里对这个功能的叙述很模糊，我在写这篇文档的时候才读懂了它的意思。

在研究（拆解）完范例后，我总结了一下几点重要的实现步骤：

页面结构
元素样式
关键方法

页面结构

页面主要分为两部分：主页面、可左右滑动的内页（swiper-page）。

这两部分主要涉及的组件为：<list>、<swiper>，同时还有这两个主要组件的一些子组件，后面大家会看到。他们的结构大致如下：

<!-- 主页面 -->
<template>
<list>
    <cell>
        <swiper>
			<swiper-item>
                <!-- 内页 -->
    		</swiper-item>
    	</swiper>
    </cell>
    </list>
</template>

<!-- 内页 -->
<template>
<list>
    <cell v-for="(item, index) in dataList" :key="item.id">
        <!-- 数据列表 -->
    </cell>
</template>

注意：

主页面的根组件必须是<list>，否则渲染的页面无法正常滑动。
<list>组件的子组件只能是<cell>、<header>、<refresh>、<loading>或是 fix 定位的组件，其他的组件无法正确渲染。
内页中的 for 循环绑定的 key 值一定保证是数据 id，方便之后对数据的处理（增删改）。