How to implement scroll on mobile side in vue-H5 Tutorial-php.cn

How to implement scroll on mobile side in vue

php中世界最好的语言

Release： 2018-03-27 16:43:00

Original

5103 people have browsed it

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

Copy after login

2. And in the componentReference

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

Copy after login

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!