VUE实现页面滚动加载

Posted 2023-03-15

参考技术A 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();

                   

                );

            ,