zoukankan      html  css  js  c++  java
  • web移动端下拉加载数据简单实现

    //下拉加载在移动端会经常使用,有些小伙伴不清楚一些原理下面就简答的介绍一下

    //首先需要监听window的滚动事件,下拉其实就是在监听window滚动事件
    var pageNum = 1;//分页第一页
    var pageTotal = 0;//默认总页数

    $(window).scroll(function () {
    var scrollTop = $(this).scrollTop();//这一步是计算已经卷进去滚动条的的高度
    var scrollHeight = $(document).height();//这个就算当前页面的总高度
    var windowHeight = $(this).height();//这个是当前window也就是浏览器的高度
    if (scrollTop + windowHeight == scrollHeight) {//如果这两个相等,不就意味着已经到了页面底部了吗?
    pageNum += 1;//这是一个全局的变量,页面滑到底部就加一
    next(pageNum);//完了执行你请求数据的函数
    }
    });
    //说明:分页是有总页数的,当超过了总页数那么久不去请求,所以你在next()做一些处理比如:你将第一次获取的数据中有总页数的这个参数,那么你赋值给
     pageTotal ,那么以后的下拉中你可以
    function next(pageNum) {
    if (pageTotal != 0) {
    if (pageNum > pageTotal) {
    return false//当前页数大于总页数,就return
    };
    .......
    }

  • 相关阅读:
    ajax post 数组
    Hello 2018 ABC
    A. The Way to Home
    Codeforces Round #453 (Div. 2) ABC
    Codeforces Round #452 (Div. 2) D
    Codeforces Round #452 (Div. 2) ABC
    Python 常用技巧
    Codeforces Round #451 (Div. 2) E
    Codeforces Round #451 (Div. 2) D. Alarm Clock
    Codeforces Round #451 (Div. 2) ABC
  • 原文地址:https://www.cnblogs.com/-youth/p/6141173.html
Copyright © 2011-2022 走看看