移动端vue下拉分页效果

背景：在项目开发过程中，使用CDN的方式来运用Vue，列表页面需要下拉分页
思路：向 Window 对象添加事件

window.addEventListener("scroll", this.scrollBottom, true);

第一个参数是时间的类型（如：‘click’，‘mousedown’）
第二个参数是时间触发后需要调用的函数
第三个参数是布尔值，用于描述事件是冒泡还是捕获，该参数是可选的。

new Vue({
  el: '#app',
  mounted: function () {
    window.addEventListener("scroll", this.scrollBottom, true);
  },
  methods: {
    scrollBottom: function(e) {
                // 滚动到页面底部时
                const el = document.getElementById("app");
                const windowHeight = window.screen.height;
                const scrollTop =
                        document.documentElement.scrollTop || document.body.scrollTop;
                const contentHeight = el.clientHeight;
                const toBottom = contentHeight - windowHeight - scrollTop;
                if (toBottom < 10 && !this.finished && !this.loading) {
                    this.loading = true;
                    // 请求的数据未加载完成时
                    this.getList();
                }
            },
  }
})

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：
默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

document.getElementById("myDiv").addEventListener("click", myFunction, true);