猹件开发组

Appearance

On this page

猹引擎 ​

GUI - 列表与分页加载 ​

这页解决什么问题 ​

让页面能显示“很多条数据”，并支持上一页、下一页。

不写代码版做法 ​

  1. 先定每页显示多少条。
  2. 点上一页或下一页时，重新请求列表。
  3. 服务端返回数据后覆盖旧列表。

分页参数说明 ​

参数作用示例
page当前页码1
size每页条数10
keyword搜索关键字武器

查询模板（带注释） ​

js
let page = 1;
const size = 10;

async function queryList() {
  await ChaEngine.sendToServer('ui.action', {
    action: 'query_list',
    body: {
      page,      // 当前页
      size,      // 每页数量
      keyword: '' // 搜索关键词
    }
  });
}

document.getElementById('btnPrev').addEventListener('click', () => {
  page = Math.max(1, page - 1);
  queryList();
});

document.getElementById('btnNext').addEventListener('click', () => {
  page += 1;
  queryList();
});

渲染模板 ​

js
ChaEngine.onServerData((packet) => {
  if (packet.channel !== 'ui.state') {
    return;
  }

  const data = JSON.parse(packet.data || '{}');
  if (data.action !== 'query_list') {
    return;
  }

  renderRows(data.rows || []);                 // 渲染列表
  renderPager(data.page || 1, data.totalPage || 1); // 渲染页码
});

客户常见错误 ​

  1. 页码从 0 开始，导致第一页空白。
  2. 切换分页后没有重新请求。
  3. 旧数据没清空，出现重复行。