基于jquery的上拉加载更多

一个简易的基于jquery的上拉加载更多demo，上拉加载的原理就是容器的高度+容器的scrollTop>=容器内容的高度，整个demo还加上了回弹的动效。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>loadmore</title><meta name="viewport" content="width=device-width, initial-scale=1"><style type="text/css">html,body{height:100%;overflow: auto;-webkit-overflow-scrolling: touch;}html,body,div,ul,li,img,p{padding: 0;margin: 0;}.container{position: relative;width: 100%;height: 100%;background-color: #eee;overflow: auto;-webkit-overflow-scrolling: touch;box-sizing: border-box;--webkit-box-sizing: border-box;}ul,li{list-style-type: none;}ul{height: auto;}ul li{height: 50px;padding: 10px;border-bottom: 1px solid #eee;line-height: 50px;}.loadmore{text-align: center;height: 0px;line-height: 30px;background-color: #999;display: none;transition: height 1s;-moz-transition: height 1s; /* Firefox 4 */-webkit-transition: height 1s;  /* Safari 和 Chrome */-o-transition: height 1s;   /* Opera */}.loadmore.show{display: block;height: 30px;}</style>
</head>
<body><div class="container"><ul><li>1</li><li>4</li><li>3</li><li>4</li><li>4</li><li>2</li><li>gff</li><li>tggf</li><li>1</li><li>4</li><li>3</li><li>4</li><li>4</li><li>2</li><li>gff</li><li>tggf</li><li>1</li><li>4</li><li>3</li><li>4</li><li>4</li><li>2</li><li>gff</li><li>tggf</li></ul><div class="loadmore">加载更多</div></div><script src="http://code.jquery.com/jquery-2.2.4.js"></script><script type="text/javascript">$(function(){var loadFlag = false;var _stary,_endy;$(".container").on("touchend",function(){$(".container").stop().animate({top:0},80);if($(this).height()+$(this).scrollTop()>=$(".container ul").height() && !loadFlag){loadFlag = true;$(".loadmore").addClass("show");$(this).scrollTop(100000000000);var str = "<li>sfsaasdfsafasf</li>";for(var i = 0;i<3;i++){str +=str;}setTimeout(function(){$(".loadmore").removeClass("show");$(".container ul").append(str);loadFlag = false;},1000);}});$(".container").on("touchstart",function(e){var _touch = e.originalEvent.targetTouches[0];_stary= _touch.pageY;});$(".container").on("touchmove",function(e){var _touch = e.originalEvent.targetTouches[0];_endy= _touch.pageY;if($(this).height()+$(this).scrollTop()>=$(".container ul").height()){var current_y = _endy - _stary;$(".container").animate({top:current_y/3},5);}});});</script>
</body>
</html>

基于jquery的上拉加载更多相关推荐

jQuery上拉加载更多
<header id="header">首页</header><section id="main"><ul id=& ...
php中手机端ajax上拉加载更多,jQuery手机网页上拉加载更多
手机网页和PC网页都可以使用的上拉加载更多内容,其中LoadingDataFn自己改为ajax加载就可以了var page = 1, //分页码 off_on = false, //分页开关(滚动加载 ...
jQuery 上拉加载更多
上拉加载,当用户浏览到页面底部时候,自动加载下一页的内容不管是上拉加载还是下拉刷新,其实都离不开一个关键的事件:滚动条滚动事件. 本demo是窗口的滚动条事件,如果需要指定某个元素做上拉加载功能,请 ...
Jquery 实现H5页面上拉加载更多
在最新的H5开发项目中,需要开发上拉加载更多的功能,如何实现上拉加载更多,网上有很多插件可以实现,如:mescroll.mui.isScroll等等,最初我也是选择了使用插件,但在使用过程中发现了如果 ...
【Android归纳】基于XListView的下拉刷新、上拉加载更多的控件分析
目录前言功能介绍总体设计组成类关系图详细设计 XlistViewHeader原理分析 XListViewFooter原理分析 XListView原理分析代码带注释下载目录前言如果你 ...
Android RecyclerView封装下拉刷新与上拉加载更多
1 scanlistlibrary 基础组件说明(基于 RecyclerView的封装) 基本数据列表(支持下拉刷新与上拉加载更多) 九宫格数据显示封装(支持下拉刷新与上拉加载更多) 瀑布流数据显示封 ...
android官方上拉加载,Android-RecycleView上拉加载更多
5.0之后推出的RecycleView来代替ListView,可以说RecycleView和ListView比起有过之而无不及,下面这篇博客主要来实现RecyclerView的上拉加载更多功能. 基 ...
js实现上拉加载更多
先贴代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
HTML列表的上拉加载更多
只是引用了JQUERY写法 JQUERY请自行下载 <%--Created by IntelliJ IDEA.User: AdministratorDate: 2017/12/27Time: 1 ...

基于jquery的上拉加载更多

基于jquery的上拉加载更多相关推荐

最新文章

热门文章