Principle of better-scroll
1. What is the better-scroll?
better-scroll is a moving scroll end solution that not only do ordinary scroll through the list, you can also do the carousel map, picker, and so on.
Scroll 2.better-scroll principle of?
First look at the browser's scroll principle, scroll bar of the browser you will encounter, when the height of the page content exceeds the height of the viewport when there will be a vertical scroll bar; when the width of the page content exceeds the width of the viewport when, horizontal scroll bar will appear. That is, when we are no less than the viewport display content when will allow the user to scroll through the contents of the screen to see the rest of the way to the scroll bar. So for better-scroll is the same reason, we first look at the better-scroll common html structure:
For more intuitive, we will look at a map:
The green part of the wrapper, which is the parent container, it will have a fixed height . The yellow part of the Content, which is the first child of the parent container, with its height will be the size of the content stays high. Then, when the height of the content does not exceed the height of the parent container is not rolling, but once it exceeds the height of the parent container, we can scroll through the content area , which is the principle of better-scroll the scroll.
So, how do we initialize better-scroll it, if it is above html structure, the initialization code is as follows:
import BScroll from 'better-scroll' let wrapper = document.querySelector('.wrapper') let scroll = new BScroll(wrapper, {})
better-scroll Foreign expose a class BScroll, we only need to initialize new instances of a class can be. The first parameter is our wrapper DOM object, the second is some configuration parameters , with particular reference to better-scroll document .
Initialization better-scroll timing is very important, because when it is initialized, it will calculate the height and width of the parent element and child elements to determine whether vertical and horizontal scrolling. Therefore, we initialize it, we must ensure that the contents of the parent and child elements have been correctly rendered. If the child when the parent element or elements of the DOM structure changes, we must recall scroll.refresh() recalculation to ensure that the rolling effect of normal. So the reason better-scroll can not scroll the students the opportunity to initialize the feedback is mostly better-scroll wrong, or is sent when the DOM structure changes did not recalculate the better-scroll.
How to use better-scroll in the Vue
Vue.js acquisition provides us with a DOM object's interface - vm.$refs. Here, we adopted a this.$refs.wrapper visit to this DOM object, and we mounted inside the hook function, this.$nextTick of Better-initialize the Scroll callback function. Because this time, wrapper of DOM has been rendered, we can calculate the height of its inner content and it is correct, to ensure normal scrolling.
Asynchronous data processing
In our practice, the list of data are often acquired asynchronously, so the time we need to initialize the better-scroll after the data acquisition, the code is as follows:
---------------------------------------------------------------------------------------------------
Before doing a project where the network failure causes better-scroll process is as follows:
You can clearly see, the above code and no parent box, so I added a parent box, but also to the parent box to a fixed height, then you can scroll up properly, the specific implementation process is as follows :
