jquery weui 上拉加载,下拉刷新,以及问题解答。
以下是上拉加载,和下拉刷新的全部代码,直接复制就能使用,记得把api换成项目真实地址,亲测有效,大神勿喷
html
<div class="container" id="container" style="height:100%; margin-top: -50px;overflow:auto; z-index: 1 ">
<!--下拉刷新-->
<div class="weui-pull-to-refresh__layer" style=" ">
<div class='weui-pull-to-refresh__arrow'></div>
<div class='weui-pull-to-refresh__preloader'></div>
<div class="down">下拉刷新</div>
<div class="up">释放刷新</div>
<div class="refresh">正在刷新</div>
</div>
<div class="contentList" id="contentList">
<!--内容展示区域-->
</div>
<div class="weui-loadmore">
<i class="weui-loading"></i>
<span class="weui-loadmore__tips">正在加载</span>
</div>
</div>
这样写的前提确保是html和body的height是100%,也就是屏幕的高度,实际出来的效果底下会缺一块,再加上下面这句代码就没有问题了。
$(function(){
$("#container").css("padding-bottom","50px");
})
不能使用高度,高度会有问题,使用padding就行了
js
var page = 1;
var limit = 10;
var loading = false; //状态标记
loadComplaints(limit,page);
//=========================下拉刷新
$("#container").pullToRefresh(function() {
page = 1;
$("#contentList").html("");
loadComplaints(10,1);
$("#container").pullToRefreshDone(); // 重置下拉刷新
});
// $("#container").pullToRefresh().on("pull-to-refresh", function () {
// });
$("#container").infinite().on("infinite", function () {
if (loading) return;
loading = true;
page++; //页数
$('.weui-loadmore').show();
loadComplaints(limit,page);
});
function loadComplaints(limit,page) {
$.showLoading();
request({
type: "GET",
url: url,//换上自己的api
data: "",
isAsync: true,
success: function(res) {
$.hideLoading();
loading = false;
if(res.status) {
if(res.data.length > 0 && res.data != null) {
creatTemplate(res.data);//这里是将数据遍历并创建dom添加到容器中
}else {
if(page == 1) {
console.log("没有数据");
$(".container").hide();
$("#noContent").show();
}else {
var endHtml = '<div class="weui-cells__title textCenter" >没有更多内容了哟~~</div>';
$("#contentList").append(endHtml);
loading = true;
}
}
}else{
$.toptip(res.msg, 'error');
var endHtml = '<div class="weui-cells__title textCenter" >没有更多内容了哟~~</div>';
$("#contentList").append(endHtml);
loading = true;
}
$(".weui-loadmore").hide();
},
error: function(err) {
$.toptip("发生未知错误", 'error');
$.hideLoading();
loading = false;
}
})
}
欢迎小伙伴们评论