H5下拉刷新组件
特性
- 定义下拉刷新元素样式
- 下拉刷新事件回调
- 支持zepto版本和react版本
示例
使用方法
react版本
var PullRefresh = require('.PullRefresh/PullRefresh.jsx');
var PostListItem = React.createClass({
render: function(){
return (
<div className="wrap" id="wrap">
<PullRefresh onRefresh={this.onRefresh} container={'wrap'}/>
<div className="scroll-content"></div>
</div>
)
}
});
zepto版本
<script type="text/javascript" src="../src/zepto/pullRefresh.js"></script>
<link rel="stylesheet" type="text/css" href="../src/zepto/pullRefresh.css">
<div class="tuijian-container" id="container">
<div class="pull-down-content">
<div id="arrowIcon"></div>
<div id="pullIcon" class="spinner" style="display: none;"></div>
<span id="pullText">刷新成功</span>
</div>
<div id="wrapper" class="wrapper ">
<ul id="recommend-hot-list" class="ul recommend-hot-list">
</ul>
</div>
</div>
<script type="text/javascript">
AlloyPullRefresh.init({
container: '#container'
});
</script>配置说明
| 参数 | 类型 | 描述 | 必需 | 默认值 |
|---|---|---|---|---|
| dragThreshold | number | 临界值 | 否 | 0.3 |
| moveCount | number | 位移系数 | 否 | 200 |
| beforePull | function | 下拉刷新触发前调用 | 否 | |
| afterPull | function | 下拉刷新触发后调用 | 否 | |
| onRefresh | function | 下拉刷新回调方法 | 否 |
License
Copyright(c) 2016-2017 AlloyTeam. Licensed under MIT license.