移动端js分页

移动端js分页:

1、页面滚动设置

var flag = true;
init : function () {
	// 添加页面滚动监听
	window.onscroll = spotList.scrollEvent;
},
/**
 * 滚动监听
 * @returns
 */
scrollEvent : function () {
	var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
	var clientHeight = document.documentElement.clientHeight;
	var scrollHeight = document.documentElement.scrollHeight;
	if ((scrollTop + clientHeight) > (scrollHeight - 300)) {
		if (flag && spotList.defaultOption.pages < spotList.defaultOption.totalPage) {
			spotList.defaultOption.pages ++;
			spotList.getSpotList();
		}
	}
},
2、获取列表计算总页数

/*
 * 默认参数
 */
defaultOption : {
	pages: 1,		// 页码
	count: 10,		// 每页数量
	totalPage: '',	// 总页码
	county: '',	// 筛选城市
},
/*
 * 获取线路列表
 */
getSpotList : function (pages) {
	flag = false;
	var loading = layer.open({type: 2,content: '加载中'});
	var map = {
			pages : spotList.defaultOption.pages,
			count : spotList.defaultOption.count,	
			themeId : '',
			county : spotList.defaultOption.county,
	};
	commonAjax.ajaxSubmit("../masView/getViewList.do","POST",map,function(result){
		layer.close(loading);
		if(result.resCode == '0'){
			var data = result.resData;
			var sum = data.count;
			if(sum > 0) {
				var list = data.list;
				var html = '';
				for (var i = 0; i < list.length; i++) {
					html += formatHtml.replace('{0}',list[i].poiId)
									  .replace('{1}',list[i].thumbNail)
									  .replace('{2}',list[i].poiName)
									  .replace('{3}',list[i].area)
									  .replace('{4}',list[i].city)
									  .replace('{5}',list[i].county)
									  .replace('{6}',list[i].poiAddress);
				}
				$('#f_list').append(html);
				
				// 图片延时加载
				$("img.lazy").lazyload({
					placeholder : "../../img/default.png",
					threshold : 20,
					failurelimit : 10,
					effect : "show"
				});
				flag=true;
				/** 初始化总页数 */
				var count=spotList.defaultOption.count;
				if (sum % count == 0) {
					spotList.defaultOption.totalPage = sum / count;
				} else {
					spotList.defaultOption.totalPage = parseInt(sum / count) + 1;
				}
				$('.no-result').hide();
				$('html,body').css('background-color','#E4E4E4');
			} else {
				// 显示没有数据
				$('.no-result').show();
				$('html,body').css('background-color','#fff');
			}
		} else {
			errMsg.showError(result.errCode);
		}
	});
},


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值