uiUI 组件系统
对比

分页

Pagination

把可定位的数据集合分成明确的页。

交互预览实时预览

示例条目 1–3

第 1 页,共 2 页

点击页码翻页
使用代码安装指南 ↗
app.mjs
import { mount } from '@sofish/ui/browser';

const view = mount(
  document.querySelector('#example'),
  'pagination'
);

view.element.addEventListener('ui:change', event => {
  console.log(event.detail.value);
});

// view.update({ ...nextProps });
// view.destroy();

什么时候用

用户需要返回某一页或浏览可计数结果。

什么时候不用

连续阅读内容可以考虑加载更多,但仍需保留定位。

COMPONENT API

属性与事件

传入业务数据,通过事件连接你的应用。

属性默认值
label"示例分页"
value1
total6
pageSize3
itemLabel"示例条目"

事件

ui:change

安装、生命周期与完整 API ↗

INTERACTION NOTES

交互与可访问性

  • 当前页有程序化状态。
  • 页码变化后保留上下文,必要时说明结果范围。

和相似组件的区别

分页切换数据区间;虚拟列表只改变已加载内容的渲染范围。

RESEARCH & ALTERNATIVES

官方实现映射

以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。

Element PlusPagination
官方提供

提供页码、页长和跳转配置。

关键状态

第一页中间页最后一页加载中

Vue / Nuxt · 来源核验

一起了解

数据表格 ↗虚拟列表 ↗交互数据网格 ↗