移动端前端开发H5上滑加载下一页

南宁前端开发招聘|前端开发 引用插件|前端开发小图标插件

pc端分页,大多是点击页码或者下一页来翻页,这种方式不适合移动端。移动端手指滑动操作方便,就产生了上滑下载分页的交互模式,本文介绍这种方法的实现。
思路:绑定页面滚动事件->监听页面滑动底部->ajax请求下一页数据->组装dom插入页面。
主要功能代码:
监听滑动事件,判断如果滑动底部触发请求下一页面方法。
javascript 代码片段

$(window).scroll(function() {
    //已经滚动到上面的页面高度
    var scrollTop = $(this).scrollTop();
    //页面高度
    var scrollHeight = $(document).height();
    //浏览器窗口高度
    var windowHeight = $(this).height();
    //此处是滚动条到底部时候触发的事件,在这里写要加载的数据,或者是拉动滚动条的操作
    if (scrollTop + windowHeight == scrollHeight) {
        dragThis.insertDom();
    }
});

具体代码和示例前往github

前端移动开发问题|移动前端开发ppt|移动前端开发ppt

» 本文来自:前端开发者 » 《移动端前端开发H5上滑加载下一页》
» 本文链接地址:https://www.rokub.com/4821.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!