How to implement scroll on mobile side in vue

This time I will show you how to implement scroll on the mobile side in Vue. What are the precautions for implementing scroll on the mobile side in Vue? The following is a practical case, let's take a look.

1. Firstinstallinstall

npm install better-scroll --save

2. And in the componentReference

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 official document ref

Attribute, we can do this Reference the DOM element

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

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

4. In the created() method, the background data is obtained successfully In the subsequent callback, _initScroll() is called;

Vue

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

It must be noted here that after the data is successfully obtained, the direct Dom is not necessarily the rendering after the data is obtained, so the this.nextTick() method must be used, in this. Use _initScroll() in the callback of nextTick;

Look at the official description of this.$nextTick()

So We should write it like this in the project:

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Web-side application implements back force refresh

Detailed explanation of JsChart component usage

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