跳至正文

jQuery WeUI 组件下拉刷新和滚动加载的实现

  • 前端

最近在做手机版使用到了下拉刷新和滚动加载，记录一下实现过程：

一、引入文件

<link rel="stylesheet" href="Content/jqueryweui/weui.min.css">
<link rel="stylesheet" href="Content/jqueryweui/jquery-weui.min.css">
<script type="text/javascript" src="Content/jqueryweui/jquery.min.js" ></script>
<script type="text/javascript" src="Content/jqueryweui/jquery-weui.min.js"></script>

二、页面布局

<div class="content" style="background-color: #FFFFFF; width: 100%;height:88%; margin-top:40px;margin-top: 45px;position: absolute; margin-bottom:45px;padding:0px; overflow: hidden;">
	<div class="list-main-mian weui-form-preview infinite weui-pull-to-refresh" id="listwrap" style="height:100%; margin-top: 1px;overflow:auto; z-index: 1">
		<!–下拉刷新–>
		<div class="weui-pull-to-refresh__layer" style="padding: 5px;">
			<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="weui-form-preview" id="Tolist">
			<!–内容展示区域–>
		</div>
		<div class="weui-loadmore" style="padding-bottom:30px;height:20px">
			<i class="weui-loading"></i>
			<span class="weui-loadmore__tips">正在加载</span>
		</div>
	</div>
</div>

三、js部分

var pages = 0;
var sizes = 10;
var loading = false; //状态标记
	$(function () {
	loadlist();
})
//=========================下拉刷新
$("#listwrap").pullToRefresh().on("pull-to-refresh", function () {
	setTimeout(function () {
		pages = 1;
		$("#Tolist").html("");
		loadlist();
		if (loading) loading = false;
		$("#listwrap").pullToRefreshDone(); // 重置下拉刷新
	}, 1500); //模拟延迟
});
//============================滚动加载
$("#listwrap").infinite().on("infinite", function () {
	if (loading) return;
	loading = true;
	pages++; //页数
	$('.weui-loadmore').show();
	setTimeout(function () {
		loadlist();
		loading = false;
	}, 2500); //模拟延迟
});
// =======加载数据loadlist();
function loadlist() {
	var html = "";
	$.ajax({
		type: "POST",
		url: "/Index/Index",
		data: { 'page': pages, 'size': sizes },
		dataType: "json",
		error: function (data) {
			$(".weui-loadmore").hide();
			html += "<div class=\"weui-loadmore weui-loadmore_line\">";
			html += "<span class=\"weui-loadmore__tips\">暂无数据</span>";
			html += "</div>";
			$("#Tolist").append(html);
			loading = true;
			$("#listwrap").destroyInfinite();
		},
		success: function (data) {
			if (data != null && data.length > 0) {
				for (var i = 0; i < data.length; i++) {
					html += '<div class="weui-form-preview__bd">';
					html += '<div class="weui-form-preview__item">';
					html += '<label class="weui-form-preview__label">' + data[i].Name + '</label>';
					html += '</div>';
					html += '</div>';
				}
				$("#Tolist").append(html);
			}
			else if (data == null) {
			$(".weui-loadmore").hide();
			html += "<div class=\"weui-loadmore weui-loadmore_line\">";
			html += "<span class=\"weui-loadmore__tips\">暂无更多数据</span>";
			html += "</div>";
			$("#Tolist").append(html);
			loading = true;
			$("#listwrap").destroyInfinite();
			}
		}
	});
}

注意：如果布局没有做好，滚动条的位置放的不对，在浏览信息了数条之后想往回滑动的时候即使你没有下拉也会自动触发到下拉刷新，这是一个小坑，这个问题只要在#listwrap层设置滚动条 ，所以我在#listwrap层加了一些样式style=“height:100%; overflow:auto;”

　　这样就解决好啦！！

原文链接：https://www.cnblogs.com/lemonmoney/p/7987993.html

标签: