Pull

该项目已停止维护，推荐使用 pull2 。

下拉刷新、上拉加载组件

支持 原生js amd es6 等应用场景，自定义文字、dom。

• Pull
  • 快速使用
    • 引入 js
    • 使用
  • 配置项
  • 实例方法
  • 示例
  • 更新日志

使用过程如有遇到什么问题，欢迎提交 issue，感谢支持

快速使用

引入 js

原生 js 页面

<script src="pull.min.js"></script>

require

require.config({
    baseUrl: '../dist/',
    paths: {
        'Pull': 'pull.min'
    }
});
require(['Pull'], function(Pull){
	// ...
});

es6

# 通过npm安装包
npm install pull-pro

.

import Pull from 'pull-pro'

使用

var pullConfig = {
	// 下拉刷新
	onPullUp: function () {
			// do something
	    // 处理完成后一定要调用 pullDownSuccess 或 pullDownFailed
	},
	// 上拉加载
	onPullDown: function () {
	    // do something
	    // 处理完成后一定要调用 pullUpSuccess 或 pullUpDone
	}
}

// elementId 必填 触发上拉和下拉的元素
var pullInstance = new Pull(elementId, pullConfig);

注意：如果onPullUp和onPullDown都不设置，则组件不进行任何操作。该情况下调用实例方法可能报错

配置项

| 属性 | 数据类型 | 必填 | 默认值 | 描述 | | --- | --- | --- | --- | --- | | scrollAreaId | string | - | document.documentElement | 滚动区域的 id | | autoLoad | boolean | - | true | 自动加载，加载完成立即判断是否触发加载 | | threshold | number | - | 100 | 滚动至底部多少距离触发 onPullUp。 | | distance | number | - | 50 | 下拉多少距离触发 onPullDown | | lock | boolean | - | false | 锁定操作，锁定后隐藏下拉刷新和上拉加载 dom，解锁需调用实例的 unlock 方法。 | | onPullDown | function | - | - | 下拉刷新回调方法，如果不存在该方法，则不加载下拉 dom | | pullDownText | object | - | {start: '下拉刷新', drop: '释放刷新', loading: '刷新中...', success: '刷新成功', failed: '刷新失败'} | 使用默认模板，只需配置 pullDownText 即可，如果同时配置了 pullDownDom，以 pullDownDom 为主 | | pullDownDom | object | - | {} | 自定义下拉刷新 dom，支持与默认模板混用，如果只配置某一项，其余则使用默认模板（start, drop, loading, success, failed 有效） | | onPullUp | function | - | - | 上拉加载回调方法，如果不存在该方法，则不加载上拉 dom | | pullUpText | object | - | {start: '上拉加载更多', loading: '正在加载', failed: '加载失败，点击重试', done: '已全部加载'} | 使用默认模板，只需配置 text 即可，如果同时配置了 pullUpDom，以 pullUpDom 为主 | | pullUpDom | object | - | - | 自定义上拉加载 dom，支持与默认模板混用，如果只配置某一项，其余则使用默认模板 |

实例方法

| 实例方法 | 描述 | | --- | --- | | instance.pullDownFailed() | 显示下拉刷新失败状态 | | instance.pullDownSuccess() | 显示下拉刷新成功状态 | | instance.triggerPullDown() | 手动触发下拉刷新，从而触发 onPullDown 回调方法 | | instance.pullUpFailed() | 显示上拉加载失败状态 | | instance.pullUpSuccess() | 显示上拉加载成功，重置为上拉加载前的状态 | | instance.pullUpDone() | 显示上拉加载完成状态。后面不在触发上拉加载。可通过 resetPullUpDone 方法重置 | | instance.resetPullUpDone() | 重置上拉加载完成状态，重置为上拉加载前的状态 | | instance.triggerPullUp() | 手动触发上拉加载，从而触发 onPullUp 回调方法 | | instance.updateScrollAreaHeight() | 更新滚动区域高度 | | instance.lock(direction) | direction 可选参数 'up' or 'down'，锁定方向，如不传默认全部锁定。锁定操作。锁定后，隐藏 dom 不触发相应事件，需通过 unlock 解锁 | | instance.unlock(direction) | direction 可选参数 'up' or 'down'，解锁方向，如不传默认全部解锁。解锁操作。 |

示例

点击查看 Demo

更新日志

• 20221022 2.0.3 版本
  • 该项目停止维护，推荐使用 pull2
• 20220920 2.0.1 版本
  • 优化部分逻辑
• 20180419 2.0.0 版本
  • 去掉scrollArea配置项
  • 去掉zepto依赖
• 20170714
  • Fix 修复滚动置底，上拉加载失败无限触发的问题
  • New 新增updateScrollContentHeight方法，手动更新滚动内容高度
• 20170613
  • Fix 修复配置项 autoLoad 无效问题
  • Change 如果配置autoLoad: false，上拉加载仅支持点击加载。注意配置 pullUpText
• 20170526
  • New 新增resetPullUpDone方法，重置上拉加载完成状态。考虑到页面如有筛选功能，重置数据后仍需支持上拉加载
  • New 新增updateScrollAreaHeight方法，滚动区域如有延迟加载的内容，可在加载后更新滚动区域高度
  • New 新增triggerPullDown、triggerPullUp方法，支持手动触发刷新和加载显示状态，从而触发 onPullDown、onPullUp回调方法
  • Update 优化默认模板字体
• 20170525
  • Update 支持配置 lock
  • Update 支持自定义pullDownDom、pullUpDom
  • Update 默认模板优化，文字颜色变淡，上拉加载 dom 增加补白
  • Update 修复不设置 onPullUp，下拉报错的问题
• 20170524
  • First Commit