Use of better-scroll

1. Install

cnpm install better-scroll --save

2. Introduction

import BScroll from "better-scroll";

3. Initialize

 data() {
      return {
          scroll: null
      }
  },

 methods: {
      initScroll() {
            this.scroll = new BScroll(this.$refs.area_scroll, {
              click: true
            });
      }
  },

Gets the DOM object

this.$refs.area_scroll

This line is to get the dom 

{ 
              The Click: to true 
            } 


This is a property method widget

Links: https://better-scroll.github.io/docs/zh-CN/plugins/#%E4%BD%BF%E7%94%A8%E6%8F%92%E4%BB%B6%E7% 9A% 84% E6% 96% B9% E6% B3% 95% E5% 92% 8C% E5% B1% 9E% E6% 80% A7

 

4. We may be retrieved interfaces to get data and then scrolling 

 

 // request interface to get data to render the page is an asynchronous process, created the life cycle is not yet rendered dom, nextTick will use this callback method after rendering dom
                   // initScroll Alphabet by the incoming 
                  the this . $ NextTick (( ) => {
                     the this . refs.allcity.initScroll $ (); 
   });

 

We retrieval interface created the life cycle, this time the page has not yet been rendered, we need to use this. $ NextTick this method

this. $ nextTick This approach allows us to complete mounted after the lifecycle callback method again, the operation of dom

 

Vue.nextTick () function: callback execution delay after the end of the next update cycle dom. Using this method immediately after modifying the data, obtained dom updated