Infinite无限加载模块

2024-09-19 16:04:41首发，3小时前更新

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

常规用法

常规用法是通过异步地址获取节点列表，异步地址可以是一个静态页面、动态页面或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]
                    });