Home >Web Front-end >H5 Tutorial >How to implement scroll on mobile side in vue

How to implement scroll on mobile side in vue

php中世界最好的语言
php中世界最好的语言Original
2018-03-27 16:43:005110browse

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!

Statement:
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