Pull-up load pull-down refresh see below

As usual, let’s first, oh no, today we’re going straight to the idea, no renderings, really no

We continue to analyze the interface and logic

1. Interface, into only a simple two pieces, a piece was set at the top of the text, a is at the bottom of the content, and then prompt content hidden in the screen above, generally by two ways, one is covered a layer above, the other is a marginTop: negative will be out of the screen, here I use is the first, the code is simple, just stick it

.header{

    width: 100%;

    height: 1rem; The height here should be the same as the refresh text

    position: fixed;

    z-index: 100;

}

Copy the code

2. The main focus of functionality implementation is logically divided into the following parts

Listen for an event
Position to calculate
Control interface change
Data update package

I’ll break it down one by one, and I’ll take you to the pit.

Listen for events, this simple, direct paste code

//el is the entire node of the drop down

// Add listener

this.el.addEventListener('touchstart'.this.refreshTouchStart);

this.el.addEventListener('touchmove'.this.refreshTouchMove);

this.el.addEventListener('touchend'.this.refreshTouchEnd);

// Remember to remove listeners when not in use

this.el.removeEventListener('touchstart'.this.refreshTouchStart);

this.el.removeEventListener('touchmove'.this.refreshTouchMovee);

this.el.removeEventListener('touchend'.this.refreshTouchEnd);

// We can see the function directly in the position calculation

Copy the code

Position calculation we are divided into drop-down refresh, pull-up loading two calculation, analysis can be obtained

Pull-down refresh logic = the first item of the current page in the screen and the container slide down the distance is greater than a certain value pull-up loading logic = the current page has been sliding to the bottom well, we directly look at the specific implementation of the logic code

// The code contains interface changes and data updates, look carefully

refreshTouchStart(e) {

    let touch = e.changedTouches[0];

    this.tipText = 'Pull refresh';// Drop down the prompt text

    this.startY = touch.clientY;// Get the ordinate of the current pressed point

}

refreshTouchMove(e) {

    this.$store.commit('bottomShowFalse');// Regardless of this logic, slide to hide the bottom effect

    let touch = e.changedTouches[0];

    let _move = touch.clientY - this.startY;// Get the sliding distance

    this.bottomFlag = $('.present-box').offset().top + 

    $('.present-box').height() - document.body.clientHeight <= 40;// Slide the bottom flag

    if ($('.present-box').offset().top >= this.headerHeight) {// The content body exceeds the distance of one head

        if (_move > 0 && _move < 1000) {// Sliding distance >0 indicates pull-down

//<1000 is to prevent god man from pulling Allah indefinitely

            this.el.style.marginTop = _move + 'px';// Change the interface according to the distance of the pull (interface change)

            this.moveDistance = touch.clientY - this.startY;// Record the distance of the slide and let him slide back after releasing his grip

            if (_move > 50) {// Then pull down to refresh to prevent misoperation

                this.tipText = 'Release to refresh'// There is something on it

            }

        }

    }

},



refreshTouchEnd() {

    this.$store.commit('bottomShowTrue');// Release the bottom biU

    if (this.bottomFlag) {// If the pull-up load condition is met, the data is directly updated

        this.$emit('loadBottom');

    }

    let that = this;

    if (this.moveDistance > 50) {// the loading action is triggered after a certain distance is pulled

        this.tipText = 'Data loading... ';

        let timer = setInterval(function () {

            that.el.style.marginTop = that.el.style.marginTop.split('px') [0] - 5 + 'px';// If you pull it too long, one bounce will affect the user experience, so let it bounce up to 50 first, and then update the data

            if (Number(that.el.style.marginTop.split('px') [0< =])50) {// If the value is less than 50, the interface will not be changed

                clearInterval(timer);

                new Promise((resolve, reject) = > {

                    that.$emit('loadTop', resolve, reject);// Notify the parent control that the drop-down refresh condition is satisfied, you update it

                }).then((a)= > {

                  that.resetBox();

                }).catch((a)= > {

                  that.resetBox();// The interface will bounce back.

                });

           }

       }, 1);// Use a promise to wait until the data update is complete. You can also use other methods, such as async await

    } else {

        this.resetBox();

    }

}

resetBox() {

    let that = this;

    // Use timer mode, BiubiUBIU to achieve the effect of sliding interface refresh.

    if (this.moveDistance > 0) {

        let timer = setInterval(function () {

            that.el.style.marginTop = 

            that.el.style.marginTop.split('px') [0] - 1 + 'px';

            if (Number(that.el.style.marginTop.split('px') [0< =])0) clearInterval(timer);// This is very important, do not delete, may see strange things oh

        }, 1)

    }

    this.moveDistance = 0;

    }

}

Copy the code

Core code on these, sprinkle flower end, optimization of what, you look at it, big guy don’t hit me, renderings come

I’m the renderings

This is my Github, welcome big guys to poke, update from time to time

Pull-up load pull-down refresh see below