Zepto.refresh.js

实现下拉到底部和上拉到顶部再拉就出现刷新效果

查看效果地址

Zepto.refresh

初始化

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 | 加载更多回调 |

更新版本

v1.2内容