1. Install the better – scroll 

    cnpm install better-scroll --saveCopy the code

  2. To introduce better – scroll 

    import BScroll from "better-scroll";Copy the code

  3. Structure in HTML (must have only one child container < is what to scroll >) 

    <div ref="wrapper" class="home">   <div class="main"> Scroll content area </div> </div>Copy the code

  4. style 

    .home { position: absolute; overflow: hidden; height: 100%; width: 100%; } .main { width: 100%; height: auto; display: flex; display: -webkit-inline-flex; flex-direction: column; align-items: center; position: relative; Background: rgba(0, 0, 0, 0.9); }Copy the code

  5. Initialization scrolling (only called when the DOM is fully rendered, either in the Monted or Update lifecycle, or in the data request completion callback) 

    this.$nextTick(() => {      this.scroll = new BScroll(this.$refs.wrapper, {        click: true,        bounce: false      });    });Copy the code

  6. Chinese document

Ustbhuangyi. Making. IO/better – scro…