通过vue.js请求数据并实现懒加载

页面滑动到最底部触发内容加载vue实现

刚刚工作，安排做公司的wep站点，项目使用了jquery和vue，但是并没有使用vue-cli来创建，没有实现模块化。
产品列表页面需要实现触底自动加载页面。
用vue使用mint-ui当然是最好的选择啦。
但是由于之前说的原因，我翻看了mint-ui的文档，发现并不适合我这个项目。
后来想到用jquery来实现。
原理：首先要先判断页面怎么样才是滚动到底部，也就是scrollTop+window的height是否大于document的height
代码如下

if($(window).scrollTop()+$(window).height()>=$(document).height()){
    
}

然后在window对象上绑定scroll事件

$(window).on("scroll", function(){
    
})

接下来我在vue实例中发送请求的methods中加入了以上代码。
但是他并不工作。好吧，我来找找原因。

于是我在各个生命周期调用这个函数。但是它始终不工作。

经过思考发现虽然我给window绑定了调用vue内请求数据函数的事件，但window貌似并不能调用vue实例内的方法。

好吧那我把scroll事件绑定到我的vue根节点app上吧。
咱们再来！

又不行，经过试验，发现是scroll事件只能在window上监听。这就难倒我了？难道要我用ajax来请求？我的页面结构可都是vue请求来的！那岂不是得重写！

再思考。

好吧！我可以在vue实例内加一个隐藏的div，给他设置一个click事件。然后在第一次请求列表的时候就给我window绑定一个触底事件，触底就用trigger触发div的click事件

ok！这次从逻辑上是完全可行的！

var data = {page: "1"} 
var app = new Vue({
    el: #app,
    data: {
        resultlist: null
    }，
    created: function(){
        getList()
        clickNextPage()
    },
    methods: {
        getList: function () {
            this.$http.jsonp({ //调用接口
                data: data,
                method: 'POST',
                url: url.getHouseList,
                emulateJSON: true,
            }).then(function (res) { //接口返回数据
                this.resultlist = res.data.result
                data.page++
            })
            $(window).on("scroll", function () {    //给window绑定scroll触底事件
                if ($(window).scrollTop() + $(window).height() + 1 >= $(document).height()) {
                    $(".nextPage").trigger("click")
                }
            })
            // }

        },
        clickNextPage: function () {    //给隐藏div绑定click事件
            this.$http.jsonp({ //调用接口
                data: data,
                method: 'POST',
                url: url.getHouseList,
                emulateJSON: true,
            }).then(function (res) { //接口返回数据
                var curList = res.data.result
                if (this.resultlist) {
                    this.resultlist = this.resultlist.concat(curList)
                    data.page++
                }
            })
        },
    }
    
})

再次运行。

ok！累死我了。
这破项目，我迟早得把你重写！