Pagination分页组件

2025-03-03 10:20:40首发，5小时前更新

ax-pagination组件用来快速创建数据分页，支持自动分页和手动分页

pagination系列文档

Pagination分页组件 5小时前更新 Pagination分页导航（非模块） 6天前更新 ax.Pagination分页模块(class)使用数据源 需3金币 6天前更新 AX-PAGINATION分页组件(webcomponent)详细使用方法 需2金币 1周前更新 Pagination分页模块 1周前更新 ax.Pagination分页模块(class)事件和方法 需2金币 1周前更新 ax.Pagination分页模块(class)功能和特性 需4金币 1周前更新

简单使用

直接在页面插入ax-pagination标签即可，结果将按默认参数渲染分页。

输出
HTML

```
                
                
            
```

指定页数

content可指定信息总数，count可指定每页显示的条目数，current可指定初始化显示页码。

如果content指定了信息总数，那么需要配合使用cont-type="total"指定数据类型。

输出
HTML

```
                
                
            
```

渲染列表

分页的目的最终是创建列表，由于在html节点上写数据有局限性，所以需要借助内置的Pagination实例来渲染列表。

输出
HTML
JS

```
                
                
            
```

                
                let comp = document.querySelector('#demo02');
                //node.ins便是内置的Pagination实例
                comp.ins.on('located',(resp)=>{
                        //resp={current,data}
                        let html = '';
                        for(let k of resp.data){
                            html += `<section>${k.index}</section>`
                        }
                        document.querySelector('#box02').innerHTML=html;
                });
                //初始化显示第一页
                comp.ins.locate(1);

Attributes属性

组件的属性与内置实例的参数是一致的，比如在Pagination模块中，使用current:1参数表示初始页面，在组件中使用属性current="1"表示初始页面。

有三点需要注意：

组件属性全部小写。
属性值都是字符串格式。
属性名如果是动宾结构，或者是由两个词组成的，那么中间使用短横分开，例如：模块参数listSel，在组件属性写做list-sel；参数b4Locate在属性中写做b4-locate。

欲了解Pagination模块的参数详细，请点击这里。

Methods方法

除了组件通用的set、reset方法外，主要使用组件内置实例自身的方法。

比如：elem.ins.locate(1)方法表示定位到第一页。

Events事件

除了组件通用的set、reset、connected事件外，主要使用组件内置实例自身的事件。

比如，elem.ins.on('located',(resp)=>{...})方法表示定位到某一页时触发。