手机H5页面,滑动到底部自动加载下一页内容

做公众号项目中有如下场景,一个H5页面有列表数据,不考虑一次加载所有数据,故需要分页操作,解决方案为滑动到底部自动加载下一页内容。直接在H5的js当中实现。

主要使用jquery的scroll()方法:

当用户滚动指定的元素时,会发生 scroll 事件。

scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。

scroll() 方法触发 scroll 事件,或规定当发生 scroll 事件时运行的函数。

代码如下:

$(window).scroll(function(){  //判断是否滑动到页面底部
     if($(window).scrollTop()== $(document).height() - $(window).height()){
           // TODO 滑动到底部时可请求下一页的数据并加载,加载可使用append方法
     }
});
时间: 2024-12-22 04:40:39

手机H5页面,滑动到底部自动加载下一页内容的相关文章

笔记-移动端滑动到底部自动加载下一页内容

公司微信公众号的网页由ThinkPHP框架的模板生成,由一个需求是滑动到底部时自动加载下一页内容. 1.网页结构 网页分为两个部分,顶部固定导航栏,下部有一个page容器,内部滚动显示. 2.加载下一页的流程 当滑动到底部时,发送ajax请求下一页内容,内容返回后,将内容拼接成HTML结构后插入原有的page下. 页面是后端已经分好的,所以ajax请求的数据中包含一个currentpage变量,这个变量每次请求时自增1,表示请求下一页. 3.如何实现 想着原理比较简单,所以自己实现了一下,实现思

页面滚动到底部自动加载下一页功能的实现

页面滚动到底部自动加载下一页功能的实现,效果见本博首页 1.endlesspage.js文件内容 var gPageSize = 10; var i = 1; //设置当前页数,全局变量 var finished = false; var dataUrl = ''; $(function () { //根据页数读取数据 function getData(pagenumber) { //console.log(i); $.get(dataUrl, { pagesize: gPageSize, p:

页面滑动底部自动加载下一页信息

最近移动端的项目做的比较多,记录下一种非常使用的移动端分页方式. 一  前端页面javascript代码 设置一个全局变量. var pageIndex = 1; 然后添加页面滚动事件,如果滑动到页面底部,自动执行GetList()方法,从数据库获取第二页的数据,然后转化成json返回给前台页面. $(document).ready(function () { $(window).scroll(function () { var nowScrolledHeight = document.docu

Android LRecyclerView 操作案例分享-实现下拉刷新、滑动到底部自动加载

一直想抽空写下这个开源项目,但是各种原因没有抽时间,今天还是趁着工作间隙写下了这篇博客,与大家分享. 简介 LRecyclerView是支持addHeaderView. addFooterView.下拉刷新.分页加载数据的RecyclerView. 它对 RecyclerView 控件进行了拓展,给RecyclerView增加HeaderView.FooterView,并且不需要对你的Adapter做任何修改. 主要功能 下拉刷新.滑动到底部自动加载下页数据: 可以方便添加Header和Foot

Android数据分批加载-滑动到底部自动加载列表

Android数据分批加载-滑动到底部自动加载列表 2014年5月9日 本博文介绍如何进行数据分批加载,在应用开发当中会经常使用到ListView,点击更多加载数据是我们经常简单,为了提供用户体验,当用户将列表滚动到底部自动加载数据,这样的形式用得比较多. 下面给大家提供的例子是,每次模拟20条数据,滑动到底部时再请求20条数据直到请求到限定页数为止 具体代码实现: /08_Datapageload/src/com/wwj/datapageload/MainActivity.java packa

RecyclerView滑动到底部自动加载

你经常听到“上拉加载”这样的字眼吗?你知道这个功能是怎么实现的吗?这篇文章记录了我对“上拉加载”的实现,与大家一起分享. “上拉加载”针对的是RecyclerView或者Listview这样的列表控件(本文以RecyclerView为例),一般和“数据分页”配合使用,旨在实现“分页加载,随用随取”,从而避免了一个接口返回过多的数据. RecyclerView每加载一个item都会调用一次onBindViewHolder方法,并且只在item由不可见变为可见的时候才会调用此方法.我们可以通过onB

当滚动条滚动到页面底部自动加载增加内容的js代码

这篇文章主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下..1,注册页面滚动事件,window.onscroll = function(){ }; 2,相关获取页面高度.滚动条位置.文档高度的函数: 复制代码 代码如下://获取滚动条当前的位置 function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentEle

探索SwipeRefreshLayout配合自定义ListView完成下拉刷新、滑到底部自动加载更多

在Android开发过程中经常需要实现上下拉刷新功能,Google推出的下拉刷新控件SwipeRefreshLayout(彩虹条),由于官方版本只有下拉刷新而没有上拉加载更多的功能,很多人也尝试在这个基础上进行改写.今天尝试一下使用SwipeRefreshLayout配合自定义ListView实现下拉刷新.滑到底部自动加载更多的功能. 效果图如下所示,在进入页面的时候加载自动刷新,滑到底部自动加载更多,当数据已经加载完成则显示已经加载完成,,否则上拉任可继续加载 先贴一下项目结构图吧,这样可能对

基于JQuery实现滚动到页面底端时自动加载更多信息

基于JQuery实现滚动到页面底端时自动加载更多信息 关键代码: 代码如下: var stop=true; $(window).scroll(function(){ totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()); if($(document).height() <= totalheight){ if(stop==true){ stop=false; $.post("ajax.