%20(2).svg)
项目简介
本项目是名为 infinite-list 的无限下拉列表插件，主要解决多数据列表导致的卡顿问题。运用 DOM 回收技术高效处理大量数据，支持下拉加载下一页数据、列表置顶定位以及自定义列表项 HTML 结构等功能。该插件兼容 Android 4.0+ 和 iOS 8+，同时支持 jQuery 和 Zepto 库。
项目的主要特性和功能
- DOM 回收：回收 DOM 元素，解决多数据列表卡顿问题。
- 下拉加载：支持下拉加载下一页数据，提升用户体验。
- 列表定位：可定位到列表置顶位置，方便快速浏览。
- 自定义 HTML：允许自定义列表项的 HTML 结构，适配不同需求。
- 多库支持：同时支持 jQuery 和 Zepto 库，兼容性强。
安装使用步骤
假设用户已下载本项目的源码文件，以下是安装和使用步骤：
1. 安装依赖：在项目根目录下运行以下命令安装依赖。
bash
npm install
2. 开发环境：使用以下命令启动开发环境。
bash
gulp dev
3. 打包发布：使用以下命令进行项目打包发布。
bash
gulp build
参数说明
插件支持以下参数配置：
| 参数 | 默认值 | 说明 |
|------|--------|------|
| wrapper | .infinite-list | 列表容器 |
| listData | [] | 列表数据 |
| offset | 10 | 触发加载下一页的相对底部距离 |
| activeIndex | 0 | 定位 Item 的索引 |
| rowHeight | 58 | Item 的高度 |
| isInfinite | false | 是否是无限下拉列表 |
| itemTemplate | * | 列表 Item 的 HTML 模板 |
| loadStatusTemplate | * | 状态 HTML 模板 |
回调函数和方法说明
回调函数
| 函数 | 默认值 | 说明 |
|------|--------|------|
| onInfinite | function(){} | 加载下一页时触发 |
方法
| 方法 | 说明 |
|------|------|
| obj.pushData() | 添加数据 |
| obj.setLoadStatus(status) | 设置列表加载状态 |
| obj.locate(index) | 定位到置顶 Item |
目录结构
.
├─ dist # 项目发布资源目录, gulp 生成
│
├─ gulp
│ ├─ build.task.js # 打包任务
│ ├─ clean.task.js # 删除任务
│ ├─ dev.task.js # 开发任务
│ ├─ gulp.config.js # gulp 配置
│ ├─ help.task.js # 帮助任务
│ ├─ server.task.js # 本地服务器任务
│ └─ watch.task.js # 监听任务
│
├─ src
│ ├─ css # 项目 CSS 文件, 由 gulp 生成
│ ├─ demos # 项目示例页面
│ ├─ images # 项目 image 文件
│ ├─ js # 项目 JS 文件
│ │ └─ infinitelist.js # 无限列表 JS
│ ├─ libs # 公共 JS 文件
│ ├─ scss # 项目相关 SCSS 文件
│ ├─ index.html # 入口页
│ └─ templates # 初始静态 DMEO 资源目录
│
├─ gulpfile.js # gulp 任务配置
└─ package.json # 项目信息以及依赖
注意事项
- 请确保设备支持 Android 4.0+ 或 iOS 8+。
- 遵循安装使用步骤进行安装和使用，以确保项目正常运行。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】