JQM 页面滚动加载
1 应用场景:文章比较长,只加载部分,当到页面底部触发获取更多数据。
2 如图,监听滚动条的位置,触发事件,转化为求X的长度,

3 实例代码:
//滚动条到底加载更多
$(document).on("scrollstop","#Report_Content",function ScollPostion() {//滚动条位置
var t, l, w, h;
if (document.documentElement && document.documentElement.scrollTop) {
t = document.documentElement.scrollTop;
h = document.documentElement.scrollHeight;
} else if (document.body) {
t = document.body.scrollTop;
h = document.body.scrollHeight;
console.log(t);
console.log(h);
}
var wh = $(window).height(); //页面可视区域高度
var s = h - (t + wh);
if ( s <= 100 ) {
// 2 获取下一个页面ID的内容,append 到现有内容后面。
GetReportContentAppendById(id,function CallBack(data){
id=data;
});
}else if( t <= -50 ){
alert('滚动条到顶了');
}
});
JQM 页面滚动加载的更多相关文章
- 潭州课堂25班:Ph201805201 django 项目 第二十二课 文章主页 新闻列表页面滚动加载,轮播图后台实现 (课堂笔记)
新建static/js/news/index.js文件 ,主要用于向后台发送请求, // 新建static/js/news/index.js文件 $(function () { // 新闻列表功能 l ...
- 在页面制作的时候常用的html页面滚动加载,可视区域判断方法
演示图 考虑2个情况一种情况初始状态下 滚动到在中间区域的时候,这时上半部分看不见的元素就不给字体添加红色一种情况是,从头向下看的. 代码 .ss li { margin: 40px; } <d ...
- 移动设备的HTML页面中图片实现滚动加载
如今移动互联网风靡全球,移动页面的元素也是丰富多彩,一个移动页面的图片超过10张已经是再正常不过的事情了.但是相对,很多移动用户还停留在2G,3G这样的网络中.那么这样带宽的用户,在浏览这样的页面时, ...
- 不想分页怎么办??-->页面数据的滚动加载
在前几天的一次前台数据展示的时候 为了更好的用户的体验 就想着做一个数据的滚动加载功能 于是简单的查询了网上的实现方式 基本都是在页面加载的时候绑定scroll事件 然后判断页面触底的时候 进行aja ...
- h5页面列表滚动加载数据
h5列表滚动加载数据很常见,以下分享下今天做的案例: 前言 这个效果实现需要知道三个参数 1. scrollTop -- 滚动条距离顶部的高度 2. scrollHeight -- 当前页面的总高度( ...
- 滚动加载|页面滑到底部加载数据|jquery.endless-scroll插件|使用demo
<html> <head> <link rel="dns-prefetch" href="http://i.tq121.com.cn&quo ...
- HTML5商城开发一 楼层滚动加载数据
对于楼层加载在以前只是个想法,从来没实现过,刚好项目中碰到,再此总结一下 场景:HTML5,局部商品列表信息滚动(局部滚动条) 1.通过jq设置subCategoryScroll的高度为屏幕显示高度( ...
- [转] Jquery滚动加载
原文地址:http://hi.baidu.com/vipxiaofan/item/9eb927b795671f77254b0985 另外一个asp.net的例子:http://blog.csdn.ne ...
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...
随机推荐
- Android 在webView中创建web应用(译文)
如果你想在客户端添加一个web应用程序或者仅仅一个web页面,你可以通过使用WebView,WebView是基于android中View的扩展,能够在Activity的layout中实现显示网页,它不 ...
- js中的时间转换—毫秒转换成日期时间
转自:http://www.javascript100.com/?p=181 前几天,在项目中遇到js时间增加问题,要将js毫秒时间转换成日期时间 var oldTime = (new Date(&q ...
- RatingBar设置显示星星个数
RatingBar评分控件 项目中遇到问题 marker一下: 关于自定义以及遇到的出现模糊情况 多半是因为切得图除颜色外 不一致的原因 如果大小也不一样,(沃日) 问题是这样的: 我可以通过OnRa ...
- scp 在不同主机之间数据传输
不同的Linux之间copy文件常用有3种方法,第一种就是ftp,也就是其中一台Linux安装ftp Server,这样可以另外一台使用ftp的client程序来进行文件的copy.第二种方法就是采用 ...
- 安装windows系统(win7)
又到了清理电脑,重装系统的时候了.最近被自己电脑折腾得不清,特记录下安装心得,以方便以后. 分区考虑(35G+40G) 35G=16G+4G+5G+10G,其中16G是64位官方旗舰版WIN7刚安装好 ...
- 当可以设置src时,不必发ajax请求,如果没有参数设置src即可
var params = (function(obj){ var string = []; for(var key in obj){ string.push(window.encodeURI(key) ...
- 微信开发 提示 Redirect_uri参数错误解决方法
出现这个问题有多种原因: 1.没有配置网页授权 我们可以根据微信的开发者文档http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d ...
- php-mysql结果集函数比较
本节主要介绍了获取查询结果集的4个函数,此处对它们进行综合比较. ● mysql_result():优点在于使用方便:而缺点在于功能少,一次调用只能获取结果数据集中的一行记录,对较大型的数据库 ...
- 一、两种方式初始化Mybatis
一.xml Configuration.xml <?xml version="1.0" encoding="UTF-8" ?> <!DOCTY ...
- 连接数据库超时设置autoReconnect=true
1,问题现象: com.mysql.jdbc.CommunicationsException: The last packet successfully received from the serve ...