页面触底加载实现原理

要实现的效果是内容盒子的内容滑动到最底部的时候，加载新的内容。

判断上述情况需要有三个值： 1、内容盒子的高度 2、盒子里内容的总高度 3、滚动条的scrollTop 获取到三个值以后，只需要判断内容盒子的高度+滚动条的scrollTop = 盒子内容的高度即为触底。

当然市面上已经也有不少封装好的scroll滚动插件（像iScroll、better-scrol），可以拿来即用，触底方法也不需要自己写了，我这里总结了一下自己实现的大概思路。

我这里用的是自定义盒子，将盒子样式设置为overflow-y:auto，通过里面的scroll方法来监听判断滚动的距离是否触底：

getScroll(e) {
    //我这里用了节流 控制频率
    //这里的timeout需要提前在外面声明
    if (!timeout) {
        let self = this;
        timeout = setTimeout(function () {
            /**
            * height1 里面内容总高度
            * height2 外面容器的高度
            * scrollTop 滚动距离顶部的高度
            * 外面容器的高度 + 滚动条的scrollTop = 盒子内容的高度即为触底
            */
            let height1 = document.getElementsByClassName("data-container")[0].clientHeight;
            let height2 = document.getElementsByClassName("scroll_container")[0].clientHeight;
            let scrollTop = e.target.scrollTop;

            // 距离底部100px时开始加载
            if (height2 + scrollTop > height1 - 100) {
                console.log("触底了");
		// 加载函数
                // self.loadmore();
            }
            timeout = null;
        }, 100);
    }
},

如果不是自定义盒子，而是直接在页面滚动，则需要监听页面的scroll方法，如下： 在handleScroll方法中通过document.documentElement.scrollTop获取滚动距离，之后的实现思路同上

mounted() {
  window.addEventListener("scroll", this.handleScroll, true);
}