Infinite无限加载模块

2024-09-19 16:04:41首发，2个月前更新

Infinite无限加载是长列表的一种展示方式，该模块将按需加载列表内容；支持自动加载列表和手动触发加载列表，触发次数越多，加载的列表将越长，当然视窗之外的列表项使用content-visibility属性，对内存和性能做了优化处理；无限滚动也属于懒加载范畴，比较适合中小型列表。

Infinite无限加载模块 2个月前更新 ax.Infinite无限加载模块详细使用方法和诸多示例 需4金币 2个月前更新

常规用法

常规用法是通过异步地址获取节点列表，异步地址可以是一个静态页面、动态页面或json路径。

因为是异步请求，所以通常需要配合设置contType和contData参数，甚至使用ajax参数。

输出
HTML
JS

```
                
                
            
```

                
                    new ax.Infinite('#demo01',{
                        content:['https://req.axui.cn/v3/html/his01.html','https://req.axui.cn/v3/html/his02.html','https://req.axui.cn/v3/html/his03.html'],
                        contType:'async',
                    });

从Json获取节点数据

参数content传入一个json地址数组，并设置参数contType:'async'，请求到的json数据要求一个数组，数组中的每一项将被当做渲染节点的数据，所以此时还需要搭配使用tplStr和tplEng两个参数。

tplEng默认是本框架的renderTpl，用户可以自定义其他的模版引擎函数。

输出
HTML
JS

```
                
                
            
```

                
                    new ax.Infinite('#demo21',{
                        content:['https://req.axui.cn/v3/json/food01.json','https://req.axui.cn/v3/json/food02.json','https://req.axui.cn/v3/json/food03.json'],
                        contType:'async',
                        tplStr:`<li>{{this.id}}-{{this.label}}</li>`,
                    });

从节点获取DOM列表

参数content如果是一个节点数组，那么将从节点获取其子节点作为单页的节点列表。

输出
HTML
JS

- 1-1
- 1-2
- 1-3
- 1-4
- 1-5
- 2-1
- 2-2
- 2-3
- 2-4
- 2-5
- 3-1
- 3-2
- 3-3
- 3-4
- 3-5
```
                
                
            
```

                
                let dom01 = document.querySelector('#dom01'),
                    dom02 = document.querySelector('#dom02'),
                    dom03 = document.querySelector('#dom03');
                    new ax.Infinite('#demo02',{
                        content:[dom01,dom02,dom03]
                    });

基础配置

属性	类型	默认值	说明
trigger	'scroll'/'click'/'clicks'	'scroll'	无限滚动触发方式
classes	string	''	窗口样式类
spin	string	'<ax-spin></ax-spin>'	加载器HTML
max	number	20	最大页数限制

数据源配置

属性	类型	默认值	说明
content	string	''	数据源内容
contType	'text'/'html'/'node'/'image'/'async'	'text'	内容格式类型
contData	object	{}	请求数据参数
ajax	object	{}	异步请求配置

模板配置

属性	类型	默认值	说明
tplStr	string	''	模板字符串
tplEng	function	null	模板引擎

监听配置

属性	类型	默认值	说明
spy.enable	boolean	true	是否启用spy侦听

媒体配置

属性	类型	默认值	说明
media.caption	string	''	媒体文件名称
media.brief	string	''	媒体文件简介

等待函数

属性	类型	默认值	说明
b4Append	function	null	添加节点前等待函数
b4Remove	function	null	移除节点前等待函数
b4Clear	function	null	清空节点前等待函数

回调函数

属性	类型	默认值	说明
onAppend	function	null	添加节点后回调
onFinish	function	null	加载完成回调
onError	function	null	请求错误回调