列表渲染前后端一体模板

页面地址 pages_template/db-test/list/list

核心点

前端只需要更改 v-for 循环内的样式和请求的云函数地址即可快速开发一个列表渲染功能

客户端（前端）功能介绍

1. 列表数据分页获取
2. 无数据时的额外显示（显示空内容组件）
3. 搜索功能
4. 下拉底部加载下一页
5. 加载过程底部状态提示（加载更多、正在加载、没有更多了）

熟练后只需要 5 分钟即可开发一个钱包余额收支列表功能（其中 4 分钟时间还是用在写样式上）

export default {
  data() {
    // 页面数据变量
    return {
      url:"db_test/pub/getList",		// 获取list数据的云函数请求路径
      ...其他
    }
  }
  ...其他
}

功能体验可请直接查看页面路径：pages_template/db-test/list/list

若无数据，需要先执行添加测试数据的函数（页面路径：pages_template/db-test/db-test）

uni-app x 蒸汽模式

上面的演示页面路径属于 uni-app 项目。x 页面使用 .uvue，将页面状态交给 reactive，再通过 that: page 传给 getListData。

下面用 scroll-view 的触底事件加载下一页。将 url 换成你已有的列表接口，接口接收 pageIndex、pageSize，返回 rows 和 total（格式见下文）。

<template>
  <view style="flex: 1; height: 100%;">
    <scroll-view style="flex: 1;" direction="vertical" @scrolltolower="loadMore">
      <view v-for="item in page.data.list" :key="item._id">
        <text>{{ item._id }}</text>
      </view>
      <text>{{ page.data.loadmore === 'loading' ? '加载中...' : page.data.pageKey ? '上拉加载更多' : '没有更多了' }}</text>
    </scroll-view>
  </view>
</template>

<script setup>
  import { reactive } from 'vue';
  import vk from '@/uni_modules/vk-unicloud';

  const page = reactive({
    form1: { pageIndex: 1, pageSize: 10 },
    data: { list: [], pageKey: true, loadmore: 'loadmore' },
  });

  function loadList() {
    vk.pubfn.getListData({
      that: page,
      url: '你的列表接口地址',
      listName: 'rows',
    });
  }

  function reload() {
    if (page.data.loadmore === 'loading') return;
    page.form1.pageIndex = 1;
    loadList();
  }

  function loadMore() {
    if (page.data.loadmore === 'loading' || !page.data.pageKey) return;
    page.form1.pageIndex += 1;
    loadList();
  }

  onLoad(reload);
</script>

将列表中的 item._id 展示文字换成自己的业务内容。page.data.loadmore 表示加载状态：loading 加载中、loadmore 可加载、nomore 已结束。修改筛选条件后调用 reload()，从第一页重新获取。若使用页面自身滚动，则改用 onReachBottom(loadMore)，不要同时绑定两种触底事件。

云函数端（后端）功能介绍

根据 where 条件获取对应的数据表的数据（支持分页、排序、字段筛选、连表查询等）

云函数路径：template/db_api/pub/getList

云函数最终返回的数据格式为：

{
  code: 0,							// 0 成功 其他：失败
  hasMore: true,				// 是否还有下一页
  pageIndex: 1,					// 当前第几页
  pageSize: 10,					// 每页获取的数量
  rows: [{_id: "5f44680d3228ad0001b1ec1a", money: 5, kehuid: "001",…},…], // list数据
  total: 30							// 数据库符合条件的共有多少条数据
}

开发一个列表渲染就是这么简单

列表渲染模板体验地址

插件首页体验地址