移动端 html5 插件,实现下拉刷新,加载更多等功能,支持require.js
react 版本 react-pullLoad
https://lidianhao123.github.io/pullLoad/
不依赖第三方库
固定DOM结构
支持 body 或者固定高度的 DOM 块级元素作为外部容器 contianer(即可视区域大小)
普通版本和 react 版本核心代码一致,即抽离出核心代码层和具体实现层
经过实际开发发现抽离核心代码使逻辑更加的复杂,直接复用核心逻辑完成具体实现。
触摸事件绑定在内容块 content(即高度为 auto 的DOM )
<!-- 最外层包裹 DIV 的 class 会被重置 建议使用 id 进行配置 -->
<div id="test_div" class="">
<div class="tloader-symbol">
<p class="tloader-msg"><i></i></p>
<p class="tloader-loading">
<i class="ui-loading"></i>
</p>
</div>
<div class="tloader-body">
<!-- 此处添加具体内容 -->
</div>
<div class="tloader-footer">
<p class="tloader-btn"></p>
<p class="tloader-loading">
<i class="ui-loading"></i>
</p>
</div>
</div>
<script src="https://github.com/lidianhao123/pullLoad/raw/master/js/pullload.js"></script>
当然也支持 require 模块化方式
require(["zepto", "pullload"], function($, pullload) {})
此示例代码为 domo1 中部分代码节选,详情可直接参考 domo1
var installObj = new pullload({
container: document.body,
wrapper: document.getElementById("test_div"),
downEnough: 100,
distanceBottom: 300,
// onRefresh 有两个回调函数,二者必须调用一个
onRefresh: function(success,error){
console.info("实际代码 onRefresh")
setTimeout(function(){
$(".test-ul").html(createAll(data));
success(); //完成刷新调用
},2000);
//error(); //异常调用
},
// onLoadMore 有两个回调函数,二者必须调用一个
onLoadMore: function(success, error){
console.info("实际代码 onLoadMore")
setTimeout(function(){
$(".test-ul").append(createLi(data[loadMoreIndex]));
// if(--loadMoreIndex){
success(false); //加载动作完成
// } else{
// success(true); //加载动作完成 并且传递 true 参数通知组件无更多内容
// }
},500);
//error(); //单词请求异常调用
},
});
MIT