html超出高度自动下一页,上滑web页面自动加载下一页

移动端常常是通过向上滑动到页面底部自动加载下一页内容，而不是点击“下一页”按钮进行加载。这是一个演示了自动加载下一页的小demo。

html:

html>

向上滑动自动加载后续页面

js:

var page_example = {

pageNo:1,

init:function(){

for(var i = 0;i

var html = '

' +

' 第1页項目' + i +

' +

' 內容' + i +

' +

$("#content").append(html);

}

loadContent:function(pageNo){

for(var i = 0;i

var html = '

' +

' 第'+pageNo+'页項目' + i +

' +

' 內容' + i +

' +

$("#content").append(html);

}

$(function(){

page_example.init();

$(window).scroll(function(){

var mybody = document.body;

//FF支持document.documentElement.scrollTop，chrome支持document.body.scrollTop

if(mybody.scrollHeight-mybody.clientHeight <= (mybody.scrollTop | document.documentElement.scrollTop)+5){

console.log('加载下一页');

page_example.pageNo++;

page_example.loadContent( page_example.pageNo)

}

});

css:

html,body{

height:100%;

}

.common-greyframe{

background: #f0f0f0;

padding: 0.5em;

}

.common-items{

border: 0.1em solid #8c8b8a;

border-radius: 0.3em;

background: #FFFFFF;

margin: 0.5em;

}

.common-usercontent{

font: 0.8em sans-serif;

color:#000000;

padding: 0.5em 0.5em 0 0.5em;

}

.common-school,.common-previewcontent{

font: 0.6em "sans-serif";

color:#c4c4c4;

padding: 0.2em 0.5em 0.5em 0.5em;

}

演示：

地址：http://sandbox.runjs.cn/show/a3w4ayie

html超出高度自动下一页,上滑web页面自动加载下一页相关推荐

listview上拉加载上一页下拉加载下一页共通处理
先什么都不说了,上效果图: 第一页默认显示: 上拉加载下一页: 拉至一定高度: 松开加载中: 下拉加载上一页: 下拉至一定高度: 松开加载中: 代码已经上传:http://download.csd ...
Android复习06【网络编程提高篇-安装GsonFormat、HttpUrlConnection封装、线程池、GsonFormat解析Json、自动加载下一页、自定义组件、页头页尾刷新、侧滑删除】
2020-04-07 星期二 [第8周] [考试不考...] 目录思维导图安装GsonFormat插件添加网络访问权限 GitHub---HttpUrlConnection封装线程池 G ...
android 自动加载下一页,Android PullToRefresh下拉到底部自动加载下一页
有时候我们想要修改pullToRefresh直接拉到底部的是否自动加载下一页的东西这里有个方法可以供大家参考 private void scrollToBottom() { mListView.set ...
php微信小程序向下滑动,微信小程序功能实现：上滑加载下拉刷新
本篇文章给大家带来的内容是关于微信小程序功能实现:上滑加载下拉刷新,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介 ...
php mescroll,mescroll.js上拉加载下拉刷新组件使用详解
本文实例为大家分享了上拉加载下拉刷新组件mescroll.js的具体代码,供大家参考,具体内容如下使用注意事项: 1.引入的时候出问题及时看官方给出的解决方案(基本上都必须看): 2.react中一 ...
探索SwipeRefreshLayout配合自定义ListView完成下拉刷新、滑到底部自动加载更多
在Android开发过程中经常需要实现上下拉刷新功能,Google推出的下拉刷新控件SwipeRefreshLayout(彩虹条),由于官方版本只有下拉刷新而没有上拉加载更多的功能,很多人也尝试在这个 ...
教你如何使用SwipeRefreshLayout来构建一个上拉加载下拉刷新框架
前言: 基本上所以的移动端应用都有Listview(当然RecyclerView也一样),那必不可少的都会嵌入一个上拉加载下拉刷新的功能.这样能大大的减少用户的流量消耗,同样对于用户也有更好的用户体验 ...
微信小程序：使用拖动（touchstart、touchmove、touchend）以及 scroll-view 实现下拉加载上一项导航，上拉加载下一导航功能；
页面大致页面布局  <view class="wrap"><view class=" ...
android 下拉刷新数据,如何剥离Android页面下拉刷新、加载下一页等逻辑？
最近碰到一个新的页面控制需求:下拉刷新如果失败,listview上面的数据需要保留,然后悲剧的发现之前写的NetFragment和ListNetFragment都不能覆盖这种逻辑,又要重写了.痛定思痛 ...

html超出高度自动下一页,上滑web页面自动加载下一页

html超出高度自动下一页,上滑web页面自动加载下一页相关推荐

最新文章

热门文章