首页 > 解决方案 > 请求为滚动触发两次

问题描述

我正在使用 VueJs 开发一个网站,并且我使用 JQuery 来实现滚动功能。

当用户滚动到页面底部时,我正在增加页面编号。起初(page = 1)它只显示一个请求。但是当向下滚动时,会同时触发两个请求(page = 2,page = 3)。

getDisplay()用于获取数据的函数,我为此设置LIMITOFFSET值。

        mounted: function() {
        this.getDisplay();
        this.bindScroll();
    },
    methods: {
        bindScroll: function(){
            var vm = this;
            $(window).bind('scroll', function () {
                if ($(window).scrollTop() === $(document).height() - $(window).height()) {
                    if(vm.isMorePost > 0){
                        vm.showLoading = 1;
                        vm.page++;
                        vm.getDisplay();
                    }
                }
            })
        },
        getDisplay: function() {

            var input = {
                name: this.userId,
                recordPerPage: this.recordPerPage,
                page: this.page
            };

            this.loadingIcon = 1;
            this.$http.get('/display-view/show/get-user-display', {params: input}).then(function(response) {
                this.display = this.display.concat(response.data.data);
                this.isMorePost = (response.data.data.length);
                if(response.data.data.length == 0){
                    this.showLoading = 0
                }else {
                    this.showLoading = 1
                }
            }.bind(this));

        }
    },

当用户遇到页面底部时,我只需要触发一个增加页面编号的请求。我该如何解决这个问题?

标签: javascriptvue.js

解决方案


推荐阅读