preface

A common effect of mobile pages is pulldownrefresh and pullupload, which aim to enhance the user experience. Therefore, various mobile slide plug-ins are emerging in an endless fashion. Today, Small editor also recommends a slide plug-in here: Better-Scroll.

GitHub address: better-Scroll

Better Scroll is also very easy to achieve the above effect.

  1. Vue creates the project

The project is created based on vue-CLI scaffolding, so the project must be created first (steps omitted).

  1. The introduction ofbetter-scrollThe plug-in

NPM install better-scroll –save

Import BScroll from ‘better-scroll’

After introduction, we can get an instance of an scroll object by using new BScroll(). The basic syntax of the better-Scroll object is:

let wrapper = document.querySelector('.wrapper') 
let scroll = new BScroll(wrapper, {})
Copy the code

The reason why Better-Scroll can slide is that the parent element specifies the specific width and height, and the width of the child element is larger than that of the parent element, so sliding can be realized. Neither of the above two points is necessary. See the official illustration below:

Since we are using it in vue project, we must also emphasize that when initializing the Better-Scroll to get the Scroll object, we must ensure that the DOM structure is rendered, that is, the contents in the wrapper are rendered before initializing the Better-Scroll, otherwise it may cause sliding failure. Normally we can initialize BScroll in the this.$nextTick callback, since the Wrapper DOM has already been rendered, we can calculate the height of it and its inner content to ensure normal scrolling.

This.$nextTick is an asynchronous function. In order to ensure that the DOM is rendered, you can see the internal implementation details of this function. $nextTick setTimeout(fn, 20); 20 ms is an experience value, and each Tick is about 17 ms.

  1. Configured during BScroll initializationpullUpLoadandpullDownRefreshattribute
mounted () { ... Send Ajax to get data... . this.$nextTick((a)= > {
    this.myScroll = new BScroll(this.$refs.wrap, {
      scrollY: true.pullDownRefresh: {
        threshold: 50.probeType: 3
      },
      pullUpLoad: {
        threshold: 744}})})}Copy the code

PullDownRefresh indicates that pull-down refresh is enabled, pullUpLoad indicates that pull-up loading is enabled. The default values are both false. You can check the API on the official website of Better Scroll for specific usage. In most cases, a page will fetch data from the back end first and then render the DOM structure, so I will use this.$nextTick() to initialize BScroll after I get the data from the Vuemounted hook.

  1. Binds the BScroll instance objectpullingUpandpullingDownThe event

PullingUp and pullingDown events correspond to pull-up load and pull-down refresh events respectively, and some other operations can be performed in their callback functions, such as fetching data from the background. The finishPullUp() and finishPullDown() methods must be called at the end of the callback to tell BScroll that a pull-up load and a pull-down refresh are over, otherwise the pull-up load and a pull-down refresh will only trigger once. If the structure inside the wrapper changes after the data is retrieved, the BScroll must be re-initialized by calling refresh(), otherwise it will cause a sliding exception.


this.myScroll.on('pullingDown', () => {... Send Ajax to get data from the background... . this.$nextTick((a)= > {
    this.myScroll.refresh() // Re-initialize BScroll after the DOM structure changes
  })
  this.myScroll.finishPullDown() // Call this method to tell BScroll to complete a pull after the pull refresh operation is complete
})

this.myScroll.on('pullingUp', () => {... Send Ajax to get data from the background... . this.$nextTick((a)= > {
    this.myScroll.refresh() // Re-initialize BScroll after the DOM structure changes
  })
  this.myScroll.finishPullUp() // Call this method to tell BScroll to complete a pull-up load
})
Copy the code
  1. Finish the renderings

After the language

This article is originally excerpted from my GitHub repository: Web-study. If you think this article is helpful for your front-end learning, please give it a STAR. I will update the content of the repository regularly. Warehouse address: web-study

If you have a better mobile sliding plug-in recommendation, welcome to leave a comment, sharing knowledge is also a kind of learning.