infinite-list 是可回收 DOM 的无限下拉列表
infinite-list 是可回收 DOM 的无限下拉列表插件, 支持 jQuery 和 Zepto 库。点击此预览
特性 利用 DOM 回收, 解决多数据列表导致的卡顿 支持下拉加载下一页数据 可定位到列表置顶 可自定义列表项的 HTMl 结构 同时支持 jQuery 和 Zepto 库 兼容性 Android 4.0+ iOS 8+ 示例 默认滚动元素 默认滚动元素 - 图片 指定滚动元素 指定滚动元素 - 图片 无限下拉列表 指定跳转某个 Item 安装与使用# 安装依赖
npm install
# 开发
gulp dev
# 打包发布
gulp build
参数
| 参数 | 默认值 | 说明 |
|---|---|---|
| wrapper | .infinite-list' | 列表容器 |
| listData | [] | 列表数据 |
| offset | 10 | 触发加载下一页的相对底部距离 |
| activeIndex | 0 | 定位 Item index |
| rowHeight | 58 | Item 的高度 |
| isInfinite | false | 是否是无限下拉列表 |
| itemTemplate | * | 列表 Item 的 HTML |
| loadStatusTemplate | * | 状态 HTML |
| 函数 | 默认值 | 说明 |
|---|---|---|
| onInfinite | function(){} | 加载下一页触发 |
| 方法 | 说明 |
|---|---|
| obj.pushData() |
添加数据
pushData.close([1, 2, 3]); |
| obj.setLoadStatus(status) |
设置列表加载状态 可传入参数： 'loaded': 弹窗内容, 可以是HTML 'loading': 弹窗提示图标 'loadFail': 弹窗提示文字 'loadEnd': 自动关闭的延迟时间 |
| obj.locate(index) |
列表定位到置顶 Item 可传入参数： 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 # 项目信息以及依赖
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
