分页
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 | "示例分页" |
value | 1 |
total | 6 |
pageSize | 3 |
itemLabel | "示例条目" |
事件
ui:change
INTERACTION NOTES
交互与可访问性
- 当前页有程序化状态。
- 页码变化后保留上下文,必要时说明结果范围。
和相似组件的区别
分页切换数据区间;虚拟列表只改变已加载内容的渲染范围。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
Vue / Nuxt · 来源核验