手机滚动分页

最新推荐文章于 2022-05-30 17:28:37 发布

原创最新推荐文章于 2022-05-30 17:28:37 发布 · 554 阅读

0 ·

CC 4.0 BY-SA版权

工作项目专栏收录该内容

57 篇文章

订阅专栏

本文详细介绍了如何使用iscroll实现分页数据加载，包括数据查询、下拉刷新、上拉加载以及分页信息展示。通过设置查询参数、绑定iscroll事件和处理数据加载，实现流畅的数据分页展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$.component.include({names:"iscroll", sync:false});
		
		var myScrollObj = null;
		function iscroll_page(target, url){
			var data = getParamData();//初始化查询的时候,默认查询"综合"的数据, 第一页的
			target.load(url, data, function(){
				toBindIScroll(target, url);
				var isHaveNextPage = $("#iscroll_isHaveNextPage").val();
				if(isHaveNextPage == "false"){
					$.iscrollNull("pullUp");
				}
			});
		}
		
		function toBindIScroll(target, url){
			//绑定下拉刷新时间
			$.iscroll({
				pullDown: "pullDown",//下拉刷新divId
				pullUp: "pullUp",//上拉滚动divId
				wrapper: "wrapper",//要出滚动条的最外层divId
				pullDownFn: function(myScroll){
					myScrollObj = myScroll;
					//下拉刷新页面要执行的函数,数据加载完成后，调用界面更新方法 myScroll.refresh()
					toSearch(myScroll, target, url);
				},
				pullUpFn: function(myScroll){
					myScrollObj = myScroll;
					toGetNextData(myScroll, target, url);
				}
			});
		}
		
		//得到orderType综合、销量、价格
		function getOrderType(){
			var orderTypeVal = "0";
			var currAobj = $("#odbdiv a.current");
			if(currAobj.attr("id") == "odby"){
				//价格
				if(currAobj.hasClass("now")){
					orderTypeVal = '2';
				}else{
					orderTypeVal = '3';
				}
			}else{
				orderTypeVal = currAobj.attr("ordertype");
			}
			return orderTypeVal;
		}
		
		//得到要想后台传入的参数，页码总是第一页
		function getParamData(){
			var specificationStr = $(".ggpopcondiv.specification li.current .search_value").html();
			var propertyStr = $(".ggpopcondiv.property li.current .search_value").html();
			if(!propertyStr){
				propertyStr = "";
			}
			if(!specificationStr){
				specificationStr = "";
			}
			var orderType = getOrderType();
			var data = {
				"pageNo" : 1,
				"category.id" : '${param.categoryId}',
				"brand.id" : '${param.brandId}',	
				"name" : $(".toSearchBtn").val().trim(),
				"orderType" : orderType,
				"propertyStr" : propertyStr,
				"specificationStr" : specificationStr
			};
			return data;
		}
		
		//查询数据
		function toSearch(myScroll, target, url){
			var data = getParamData();
			target.load(url, data, function(){
				if(myScroll){
					myScroll.refresh();
				}
				var isHaveNextPage = $("#iscroll_isHaveNextPage").val();
				if(isHaveNextPage == "false"){
					$.iscrollNull("pullUp");
				}
			});
		}
		
		//得到列表数据
		function toGetNextData(myScroll,target,url){
			//没有下一页了
			var isHaveNextPage = $("#iscroll_isHaveNextPage").val();
			if(isHaveNextPage == "false"){
				return;
			}
			//当前页
			var currPageNo = $("#iscroll_pageNo").val();
			if(currPageNo){
				var data = getParamData();
				data.pageNo = parseInt(currPageNo) + 1;;
				$.ajax({
					type: "POST",
					url: url,
					data: data,
					success: function(data){
						target.append(data);
						myScroll.refresh();
						//这里可以处理没有数据的时候 不可以上拉加载
						var isHaveNextPage = $("#iscroll_isHaveNextPage").val();
						if(isHaveNextPage == "false"){
							$.iscrollNull("pullUp");
						}
					}
				});
			}
		}

$(function(){
			//设置分页信息
			toSetPage();
		});
		//设置分页信息
		function toSetPage(){
			//当前页
			var pageNoDom = $("#iscroll_pageNo");
			if(pageNoDom.length != 0){
				pageNoDom.val("${page.pageNo}");
			}else{
				$("body").append('<input type="hidden" id="iscroll_pageNo" value="${page.pageNo}"/>');
			}
			//设置是否还有下一页数据
			var isHaveNextPageDom = $("#iscroll_isHaveNextPage");
			if(isHaveNextPageDom.length != 0){
				isHaveNextPageDom.val("${page.haveNextPage}");
			}else{
				$("body").append('<input type="hidden" id="iscroll_isHaveNextPage" value="${page.haveNextPage}"/>');
			}
		}