VUE H5 监听滚动上拉分页加载内容_h5分页加载listvue

最近接了一个需求，是微信浏览器监听用户上拉操作，从而实现页面滚动加载的效果。其实网上已经有很多类似成熟的栗子了，但是由于自己开发经验有限，所以第一次看到这个需求的时候也是一百脸茫然，当时不知道网上有这么成熟的框架以及案例。

随后网上一顿猛操作，看了一下确实不难。首先我们使用的是vue开发组件，是不是觉得我们这个是前后端分离的项目了，然而并没有，虽然用到了vue，完全是因为，这玩意儿好用罢了，springboot+thymeleaf模板引擎+Vue.js+elementUI等等等，总之技术栈用的很凌乱，接下来讲一下用户上拉加载更多内容的这个思路吧：

1. 首先需要考虑如何判断用户是在上拉、操作屏幕 ------》 页面监听
2. 如何判断用户已经拉到了页面底部 -----》 距离顶部 + 当前高度 》= 文档总高度
3. 拉到底部之后，如何将请求的数据重新追加到原有数据的基础上

带着以上三个问题，来解决这个需求。

首先，我们页面需要用一个DIV来存放内容，以后每次请求的数据都重新叠加到当前div内部，同时监听用户下来的操作，也是监听当前div.

<div class="view">
    ......数据渲染.......       
</div>
<div class="hint">上拉加载，获取更多内容</div>

下面这个div仅用于提示的作用，证明用户已经下拉到了底部。

其次，我们使用的是vue.js来写前端监听器以及相应的方法（用什么写这倒无所谓，毕竟vue也是根据js衍生出来更高效简介的脚本语言）

注册监听器：

 mounted() {
        // window.addEventListener('scroll', this.loading, true);
        window.addEventListener('touchmove', this.loading, true);
    },
    destroyed() {
        window.removeEventListener("touchmove", this.loading, true);
    },

touchmove 和 scroll 实现的动作其实差不多，都是js内部实现的方法，任选其一即可，对于单页面应用，最好在注册了监听器页面的地方，在离开页面的时候顺手destroyed,避免监听到其它页面。

 methods: {
        /**
         * 监听页面滚动上拉刷新
         */
        loading() {
            if (document.body.scrollTop + document.documentElement.scrollTop + document.documentElement.clientHeight >= document.body.clientHeight) {
                if (!document.querySelector('.loading')) {
                    let load = document.createElement('div');/*创建加载子元素*/ 
                    load.className = 'loading';
                    document.querySelector('.view').appendChild(load);/*添加加载子元素，，创建的div的class名，这里必须一致*/
                     setTimeout(() => {
                            document.querySelector('.view').removeChild(load);/*移除加载块*/                                                                  
                            this.pageCount++; //页码计数器，默认为1
                            this.getSceneRecordingList(); //调用自己的方法加载数据，将页码计数器传到后端，实现分页获取
                       
                     }, 300);/*刷新追加新的内容*/
                }
            }
        },
''''''''
}

该方法就是实现监听器的方法，使用setTimeout定时器延时0.3秒追加内容。

第一个if语句就是判断是否下来到了底部。

这样做的目的就是为了每次滑动到底部将 页码计数器传给后端

当然后端就是按照以往的分页方法（limit）,或者分页插件PageHelper,都可以。

当然还有更加简洁的，至于H5下来分页、滚动分页这些，早就有了相应的框架支持，例如JQuery WEUI

http://www.jqweui.cn/extends#pull-to-refresh