美文网首页
VUE实现页面滚动加载

VUE实现页面滚动加载

作者: 炜哲1120 | 来源:发表于2021-09-25 09:45 被阅读0次

    vm = new Vue({

            el: '#app',

            data: {

                items:[],

                finished:false,

                loading:false

            },

            mounted:function(){

                    window.addEventListener('scroll',this.handleScroll,true);

              },

             created: function () {

                 var that = this;

                 that.isApp = Utils.isAppTop();

                 that.getHouseList(); // 获取房源列表

             },

    computed: {

         last_id: function(){

        var $this = this;

                var lastId = 0;

                $.each($this.houseList,function (index,value) {

                    lastId = value.zf_id;

                });

                return lastId;

        }

        },

    methods: {

            handleScroll:function(e){

            var $this = this;

            console.log('handleScroll')

            if ($this.getBottomOfWindow()) {

              $this.getHouseList();

            }

        },

        getBottomOfWindow:function () {

                var viewH =$("#g-scrollview").height();//可见高度

                var contentH =$("#g-scrollview").get(0).scrollHeight;//内容高度

                var scrollTop =$("#g-scrollview").scrollTop();//滚动高度

                return viewH + scrollTop + 200 >= contentH;

            },

                getHouseList: function(){

                    var $this = this;

                    console.log('getHouseList')

                    console.log($this.finished)

                    if($this.finished){

                    return false;

                    }

                    if($this.loading){

                    return;

                    }

                    $this.loading = true;

                    $.ajax({

                        url: api

                        data: {

                                last_id:$this.last_id

                        },

                        dataType: 'json',

                        method: 'GET',

                        success: function (res) {

                            var houseList = $this.houseList;

                            if (res.error_code == 0) {

                                var count = 0;

                                $.each(res.data,function (index,value) {

                                    houseList.push(value);

                                    count++;

                                });

                                console.log(houseList)

                                $this.houseList = houseList;

                                $this.$forceUpdate();

                                if (count == 0) {

                                    $this.finished = true;

                                }

                                $this.loading = false;

                            }

                            YDUI.dialog.loading.close();

                        },

                        error: function () {

                        $this.loading = false;

                        YDUI.dialog.loading.close();

                        }

                    });

                },

    }

    相关文章

      网友评论

          本文标题:VUE实现页面滚动加载

          本文链接:https://www.haomeiwen.com/subject/jifywltx.html