How to implement the scroll method on the mobile side in Vue?

Below I will share with you an article about how to implement scroll on the mobile side in Vue. It has a good reference value and I hope it will be helpful to everyone.

1. First install and install

npm install better-scroll --save

2. And reference it in the component

import BScroll from ‘better-scroll'

The reference in the template points to the DOM element that will be scrolled

According to the description of the ref attribute in the official document, we can reference the DOM element like this

3. Register the _initScroll method in methods. This method is an instantiation of better-scroll, and this method will be executed after the page DOM structure is rendered.

methods: { _initScroll(){ this.menuScroll = new BScroll(this.$refs.menuWrapper, {}) this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {}) } } }

4. In the created() method, in the callback after the background data is successfully obtained, call _initScroll();

Vue updates data asynchronously, so before the data is fully loaded, Bscroll cannot obtain the height of the target content, so it will cause the phenomenon of being unable to scroll.

Be sure to note here that the data is obtained successfully. Finally, the direct Dom is not necessarily the rendering after the data is obtained, so use the this.nextTick() method and use _initScroll() in the callback of this.nextTick;

Look at the official information about this Description of .$nextTick()

So we should write it like this in the project:

Above I compiled it for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Vue-cli development environment method to implement cross-domain requests

Angular5 adds style class to the label of the component itself Method

Vue’s sample code to implement the internal component carousel switching effect

The above is the detailed content of How to implement the scroll method on the mobile side in Vue?. For more information, please follow other related articles on the PHP Chinese website!