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'

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;

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.

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

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!