Home > Web Front-end > JS Tutorial > body text

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

亚连
Release: 2018-06-01 16:18:15
Original
2532 people have browsed it

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
Copy after login

2. And reference it in the component

import BScroll from ‘better-scroll'
Copy after login

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, {})
   }
  }
 }
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template