Zepto.refresh.js
实现下拉到底部和上拉到顶部再拉就出现刷新效果
查看效果地址
初始化
NPM
npm install --save zepto-refresh直接HTML引入
<script src="zepto.min.js"></script>
<script src="zepto.refresh.js"></script>
使用
NPM
var Refresh = require('zepto-refresh');
Refresh('.wrap', {
// 内容元素
contentEl: '#J_scroller',
// 开启刷新事件，默认true
isRefresh: true,
// 刷新回调
refreshCallback: function(complete) {
},
// 加载更多回调
loadingMoreCallback: function(complete) {
}
});
HTML
$(window).refresh({
// 内容元素
contentEl: '#J_scroller',
// 开启刷新事件，默认true
isRefresh: true,
// 刷新回调
refreshCallback: function(complete) {
},
// 加载更多回调
loadingMoreCallback: function(complete) {
}
});
options Object配置
| 参数 | 类型 | 说明 |
|---|---|---|
| contentEl: #J_content | String | 内容ID |
| isRefresh: true | Boolean | 默认开启刷新 |
| isLoadingMore: true | Boolean | 默认开启加载更多 |
| distanceToRefresh: 100 | Number | 下拉可刷新高度 |
| minDistanceToRefresh: 100 | Number | 下拉最小阈值 |
| maxDistanceToRefresh: 200 | Number | 下拉最大阈值 |
| interval: 5 | Number | 更新限制时间, 默认不限制 |
| refreshCallback: function(){} | Function | 刷新回调 |
| loadingMoreCallback: function(){} | Function | 加载更多回调 |