SUI下拉刷新和无限滚动后台交互

SUI下拉刷新和无限滚动后台交互
html代码


<div class="content infinite-scroll infinite-scroll-bottom page-current pull-to-refresh-content"
		data-distance="100">
		<div class="list-block">
			<ul class="list-container">

			</ul>
		</div>
		<!-- 加载提示符 -->
		<div class="infinite-scroll-preloader">
			<div class="preloader"></div>
		</div>
	</div>

js代码

	$.init();
		// 是否正在加载:避免多次调用getdata引起的多次ajax请求
		var loading = false;
		// 上次加载的序号:处理当前请求第几页数据
		var index = 1;
		// 每次加载添加多少条目
		var itemsPerLoad = 10;
		//最大条数
		var maxItems;
		function addItems(item) {
			// 生成新条目的HTML
			var html = '';

			html += '<li class="item-content"><div class="item-inner"><div class="item-title">车间名字'
					+ item.workshopName + '</div></div></li>';

			// 添加新条目
			$('.infinite-scroll-bottom .list-container').append(html);

		}
		function get_data(number, lastIndex) {
			var header = $("meta[name='_csrf_header']").attr("content");
			var token = $("meta[name='_csrf']").attr("content");

			// 加载过程
			$.ajax({
				url : contextPath + '/workshop/queryWorkShopLists.do',

				async : true,
				type : 'POST',
				dataType : 'json',
				beforeSend : function(xhr) {
					xhr.setRequestHeader(header, token);
				},
				success : function(data) {
					maxItems = data.length;
					// 重置加载flag
					loading = false;

					if (index == 1) {
						$('.infinite-scroll-bottom .list-container').html('');
					}
					index = index + 1;
					//预先加载10条
					for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
						var html = addItems(data[i]);
					}
				}
			});
		}
		//预先加载20条  
		get_data(itemsPerLoad, 0);
		// 上次加载的序号

		var lastIndex = 10;
		// 注册'infinite'事件处理函数
		$(document).on('infinite', '.infinite-scroll-bottom', function() {

			// 如果正在加载,则退出
			if (loading)
				return;

			// 设置flag
			loading = true;

			// 模拟1s的加载过程
			setTimeout(function() {
				// 重置加载flag
				loading = false;


				// 添加新条目
				get_data(itemsPerLoad, lastIndex);
				// 更新最后加载的序号
				lastIndex = $('.list-container li').length;
				if (lastIndex >= maxItems) {
					// 加载完毕,则注销无限加载事件,以防不必要的加载
					$.detachInfiniteScroll($('.infinite-scroll'));
					// 删除加载提示符
					$('.infinite-scroll-preloader').remove();
					return;
				}

				//容器发生改变,如果是js滚动,需要刷新滚动
				$.refreshScroller();
			}, 500);
		});
		
		$(document).on('refresh', '.pull-to-refresh-content',function(e) {
			// 如果正在加载,则退出
			if (loading)
				return;

			// 设置flag
			loading = true;
	
		    	// 重置加载flag
				loading = false;
			window.location.reload();
		      $.pullToRefreshDone('.pull-to-refresh-content');
		 
		});

猜你喜欢

转载自blog.csdn.net/ling_ling1997/article/details/87792673
今日推荐