js上拉加载，jq上拉加载

没有特别的幸运，那么就特别的努力！！！

既然没有优人的天赋，那就拼吧！
先看下效果：

css

	* {
        margin:0px;
        padding:0px;
      }
      #header {
        position:fixed;
        top:0px;
        left:0px;
        width:100%;
        height:50px;
        background:grey;
        text-align:center;
        line-height:50px;
        color:white;
        font-weight:bold;
        z-index: 9;
      }
      #main {
        position:absolute;
        top:50px;
        left:0px;
        right:0px;
        bottom:10px; 
        padding:10px;
        overflow:auto;
      }
      #main li {
        display:flex;
        margin-bottom:10px;
        padding:10px;
        border-bottom:1px solid gray;
        border-radius:4px;
        background:#EEE;
      }
      #main li img {
        flex:50px 0 0;
        width:50px;
        height:50px;
        padding:4px;
        border:1px solid green;
      }
      #main li span {
        padding-left:4px;
        line-height:24px;
      }

html

  <header id="header">首 页</header>
  <section id="main">
      <ul id="list_box"></ul>
  </section>

jq

var page = 1, //分页码
        off_on = false, //分页开关(滚动加载方法 1 中用的)
        timers = null; //定时器(滚动加载方法 2 中用的)
    
    //加载数据
    var Loading = function() {
        var dom = '';
        for (var i = 0; i < 20; i++) {
            dom += '<li><span>没有特别的幸运，那么就特别的努力！！！</span></li>';
        }
        $('#list_box').append(dom);
        off_on = true; //[重要]这是使用了 {滚动加载方法1}  时 用到的 ！！！[如果用  滚动加载方法1 时：off_on 在这里不设 true的话， 下次就没法加载了哦！]
    };
    
    //初始化， 第一次加载
    $(document).ready(function() {
        Loading();
    });
    
    //滚动加载方法1
    $('#main').scroll(function() {
        //当时滚动条离底部60px时开始加载下一页的内容
        if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {
            clearTimeout(timers);
            //这里还可以用 [ 延时执行 ] 来控制是否加载 （这样就解决了 当上页的条件满足时，一下子加载多次的问题啦）
            timers = setTimeout(function() {
                page++;
                console.log("第" + page + "页");
                Loading(); //调用执行上面的加载方法
            }, 300);
        }
    });
	
	//还可以基window窗口（body）来添加滚动事件, (因为布局不同,所以在这里没效果，因为[上面是基于body中的某个元素来添加滚动事的])
    $(window).scroll(function() {
        //当时滚动条离底部60px时开始加载下一页的内容
        if (($(window).height() + $(window).scrollTop() + 60) >= $(document).height()) {
            clearTimeout(timers);
            timers = setTimeout(function() {
                page++;
                console.log("第" + page + "页");
                Loading();
            }, 300);
        }
    });

另外给大家拓展下scroll()无法触发的原因：

1. 少字符

2. 错中英文符号

3. 运用方式有问题（js jq运用方式有问题）一种是onscroll 后者是scroll

4. 触发原理：没有达到触发条件 这是一种很难发现与改正的问题

最主要就是——scroll触发条件为 事件在元素滚动条在 滚动时候触发，找到 滚动条的那个元素，然后绑定这个元素的滚动事件

这样就能解决无法触发滚动事件

希望能帮助到大家，同时祝愿大家在开发旅途中愉快！！！

---------------------------------更新2020/04/20-----------------

原理很简单:4行代码 轻松解决

//可滚动容器的高度
let innerHeight = document.querySelector('#app').clientHeight;
//屏幕尺寸高度
let outerHeight = document.documentElement.clientHeight;
//可滚动容器超出当前窗口显示范围的高度
let scrollTop = document.documentElement.scrollTop;
if (innerHeight < (outerHeight + scrollTop)) {
    //加载更多操作
    console.log("loading");
}

再次优化------防抖和节流

拿vue为例子

1、在公共方法中（如 public.js 中），加入函数防抖和节流方法

// 防抖
export function _debounce(fn, delay) {
 
    var delay = delay || 200;
    var timer;
    return function () {
        var th = this;
        var args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            timer = null;
            fn.apply(th, args);
        }, delay);
    };
}
// 节流
export function _throttle(fn, interval) {
    var last;
    var timer;
    var interval = interval || 200;
    return function () {
        var th = this;
        var args = arguments;
        var now = +new Date();
        if (last && now - last < interval) {
            clearTimeout(timer);
            timer = setTimeout(function () {
                last = now;
                fn.apply(th, args);
            }, interval);
        } else {
            last = now;
            fn.apply(th, args);
        }
    }
}

2、在需要使用的组件引用

import { _debounce } from "@/utils/public";

3、在 methods 中使用

  methods: {
    // 改变场数
    changefield: _debounce(function(_type, index, item) {
        // do something ...
    }, 200)
  }

拿着 不谢 请叫我“锤” ！！！