`

js mobile 滚动分页

 
阅读更多
<script type="text/javascript">

	var page = 1;
	var page2 = 1;
	var count =10;
	var data =[1,2,3,4,5,6,7,8,9,10,11,12,13,14]		;
	$(function(){
		
		loadPage($('#con_one_1'),data,page,count);
		loadPage($('#con_one_2'),data,page2,count);
	
	  $(window).scroll(function() {
			
		
		  if ($(this).scrollTop() + $(window).height() + 20 >= $(document).height() && $(this).scrollTop() > 20) {//滚动到距离底端20px位置进入下一页(一般一页count略大于屏幕尺寸,不能太大)
			 
				if($('#con_one_1').css('display')=='block'){//不同的tab分页
					page++;
					loadPage($(curTab),data,page,count);
				}
				else if($('#con_one_2').css('display')=='block'){
					page2++;
					loadPage($(curTab),data,page2,count);
				}
				//alert(page);
				//alert('y');
			
			//alert('z');
			
		  }
	  });
});

function loadPage(tab,data,page,count){//可以在此ajax后台获取数据,我这是所有数据前台分页
//alert(1);
	var html ='';
	var k = (page - 1) * count +count>data.length?data.length:(page - 1) * count +count ;
	var i =(page - 1) * count;
	
	if(i>=k){
		
		if(!$('#nodata').length){
			$('#tab2').after('<div id="nodata" class="product-title"><span>已经没有了</span><div class="border-line"></div></div>');
		}
		return;
	}
	for(i ;i<k ;i++){
	
		var cur = data[i];
		
		
			html +=	'<div class="order-box clearfix">'
					html +='<div class="order-box-head clearfix">'
//	 				html +=	'	<a href="javascript:removeOrder('+model.orderId+')" class="product-icons gray-delete f_r"></a>'
					html +=	'	<span>'+cur+'</span>'
					html +=	'</div>'
					
						html +=	'<div class="order-down clearfix">'
					
//	 				html +=	'	<div class="f_r">'
//	 				html +=	'		<a href="javascript:viewTransport('+orderId+');" class="btns-button ">查看物流</a>'
//	 				html +=	'		<a href="javascript:confirmReceive('+orderId+');" class="btns-button yellow">确认收货</a>'
//	 				html +='	</div>'
					
					html +=	'	<span >实付款:<i class="black-price">¥'+123123+'</i></span>'

					html +=	'</div>'
					
					
					html +=	'	</div>'
	}
	 tab.append(html);
}
</script>

 

分享到:
评论

相关推荐

    jquery mobile web api 带下拉,上拉滑动分页滚动示例

    在本文中,我们将深入探讨如何使用jQuery Mobile和ASP.NET Web API2来构建一个具有下拉、上拉滑动分页滚动功能的Web应用。jQuery Mobile是一个强大的移动UI框架,它为移动设备提供了丰富的交互和触控优化的界面,而...

    jquery mobile分页显示插件

    分页插件可以帮助你在用户滚动到页面底部时才加载更多内容,这种方法称为“无限滚动”或“懒加载”。 9. **响应式设计**:jQuery Mobile 的分页插件天然支持响应式布局,这意味着无论在手机、平板还是桌面设备上,...

    jquerymobile实现拖动分页加载页面功

    在实现拖动分页加载(也称为“无限滚动”或“滚动加载”)时,我们需要监听用户的滚动事件,并在用户接近页面底部时加载更多内容。 1. **设置基本页面结构**: 在jQuery Mobile中,页面通常由一个或多个`data-role...

    jquerymobile滚动加载内容

    本篇将深入探讨如何利用jQuery Mobile和Ajax实现滚动加载内容这一功能,这对于创建无限滚动的网页尤其重要。 一、jQuery Mobile 概述 jQuery Mobile是一个基于jQuery库的轻量级框架,它为移动设备提供了一套统一的...

    jqmobile相关js css

    - **可滚动区域(Scrollview)**:在触屏设备上提供流畅的滚动体验。 4. **jQuery Mobile的事件**: - `pageinit`:页面初始化时触发,用于设置初始状态或绑定事件。 - `pageshow` 和 `pagehide`:页面显示和...

    第七讲.(下)Jquery.Mobile插件.scroll.js.下拉更新插件

    总的来说,`scroll.js`插件通过增强Jquery.Mobile的滚动行为,使开发者能够轻松实现下拉刷新功能,从而提升移动应用的互动性和用户体验。通过合理地结合HTML、CSS和JavaScript,我们可以构建出高度响应和功能丰富的...

    wap网站文本分页控件

    实现wap网站的文本分页控件,通常会用到前端开发技术,如HTML、CSS和JavaScript,或者使用框架如jQuery Mobile、Vue.js、React.js等。后端则可能涉及到数据库查询优化,根据分页参数返回相应内容。具体实现步骤包括...

    jQuery带视觉差的整个页面滚动特效插件OnePageScroll.js

    jQuery OnePageScroll.js 是一个专为此目的而设计的插件,它允许开发者轻松实现这种“视差滚动”效果,即页面随着用户的鼠标滚动,各个部分以不同的速度移动,从而营造出深度感和动态视觉体验。 **一、插件功能与...

    react+ts+antd-mobile 动态tabs和下拉加载及详情

    下拉加载是一种常见的移动端分页加载方式,当用户滚动到底部时,会自动加载更多数据。在React中,可以监听滚动事件,判断滚动位置是否到达底部,然后触发加载更多数据的API调用。Ant Design Mobile没有直接提供下拉...

    10个很棒的jquery mobile插件

    7. **keep Reading** - 该插件帮助优化长篇文章的阅读体验,可能包括分页、滚动或展开隐藏内容的功能。 8. **jQuery Mobile Datebox** - 为 jQuery Mobile 添加了高级日期选择器,包括日历、时钟和其他时间选择工具...

    多屏垂直滚动jQuery宽屏幻灯片代码

    3. **jQuery插件**:虽然可以手动编写JavaScript代码实现滚动效果,但使用jQuery插件如`fullPage.js`或`swiper.js`能更高效地完成任务。这些插件已经内置了多种滚动动画和交互功能,只需进行基本配置即可。 4. **...

    五款jQueryMobile官方公认的插件源码

    这里我们将深入探讨五款jQueryMobile官方认可的插件源码,它们分别涉及界面布局、分页、列表操作以及响应式设计。 1. **jQueryMobile SplitView** (jquerymobile-splitview-master) jQueryMobile SplitView 插件...

    jquery mobile 插件

    `filamentgroup-jqm-pagination-6a7bdb4.zip` 可能是Filament Group开发的jQuery Mobile分页插件。分页是处理大量数据时非常重要的功能,它可以将长列表分割成小块,让用户更容易浏览。此插件可能提供了更美观的样式...

    jqueryMobile省市二级菜单联动

    对于大量选项的下拉菜单,考虑使用虚拟滚动或分页加载技术,以提高用户体验和性能。 通过理解以上知识点,你可以构建出一个高效、易用的省市二级联动菜单,适应各种移动设备和网络环境。在实际项目中,还需要关注...

    手机页面内容逐渐加载jquery.mobile插件

    这个插件充分利用了jQuery Mobile的功能,实现了网页内容的渐进式加载,即用户在滚动页面时,内容会逐步展现,而非一次性全部加载,这样既节省了用户的数据流量,也提高了页面加载速度,提升了用户的浏览体验。...

    jquery mobile 移动应用

    jQuery Mobile 虽然提供了丰富的预定义组件,但也可以通过 CSS 和 JavaScript 进行扩展和自定义,以满足特定项目需求。 总结,jQuery Mobile 是一个强大的移动开发工具,它简化了跨平台的触摸界面设计,特别适合于 ...

    jQuery touchSlider图片滚动插件触屏手机全屏图片

    jQuery touchSlider利用jQuery Mobile或其他类似的库来捕捉和处理触屏事件,如`swipeleft`、`swiperight`、`touchstart`、`touchmove`和`touchend`。这些事件的响应使得用户可以通过简单的手势控制图片的滑动方向和...

    手机页面内容逐渐加载jquery.mobile插件.rar

    jQuery Mobile是一个流行的JavaScript库,专门用于构建响应式和触控友好的移动Web应用程序。本资源"手机页面内容逐渐加载jquery.mobile插件.rar"显然是一个包含相关代码和资源的压缩包,用于实现这一功能。 首先,...

    jquery mobile快速入门

    - **页面结构(Page Structure)**:jQuery Mobile 采用页面(page)的概念,每个页面由一个或多个可滚动的区域(section)组成,如 `data-role="page"`、`data-role="header"`、`data-role="content"` 和 `data-...

    移动新闻网站,掌上移动新闻,移动新闻客户端,jQuery Mobile移动新闻网站,移动新闻网站demo,新闻阅读器开发

    在新闻阅读器开发过程中,jQuery Mobile可以有效地处理新闻列表的滚动、点击事件以及页面间的切换,提升用户体验。 新闻阅读器开发的关键在于提供个性化和易用的界面。这包括定制化的布局设计,如可调整字体大小、...

Global site tag (gtag.js) - Google Analytics