0

I am developing a website using VueJs and I have used JQuery for the scroll function.

I am incrementing the page no when the user scrolls to the bottom of the page. At first (page = 1) it shows just one request. But when scroll down then two requests are firing at once (page = 2, page = 3).

getDisplay() function used to get the data and I have set LIMIT and OFFSET values for that. 

        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));

        }
    },

I need to fire just one request with incremented page no when the user meets bottom of the page. How can I solve this?

Akhil Aravind
  • 5,741
  • 16
  • 35
NSR
  • 315
  • 2
  • 5
  • 18
  • hummm, first problem I see is that you are using Vue and JQuery. Look to remove the jquery and use vue. Also, It is hard to debug If I can not test your code. Maybe remove the request above, and include an example which we can run to see the page = 1 ... happening – Spangle Jan 29 '20 at 06:35
  • You mean use a vue plugin for the scroll? – NSR Jan 29 '20 at 06:38
  • No, just a vue event, see answer at https://stackoverflow.com/questions/54607340/check-if-user-scrolled-to-bottom – Spangle Jan 29 '20 at 06:39
  • No Problem :) The code will be a lot cleaner in the end and save you having to add JQuery to your project. – Spangle Jan 29 '20 at 06:40

0 Answers0