better-scroll插件

1.

better-scroll 托管在 Npm 上，执行如下命令安装：

npm install better-scroll --save

接下来就可以在代码中引入了，webpack 等构建工具都支持从 node_modules 里引入代码：

import BScroll from 'better-scroll'

2.所需页面引入。

<template>  <div class="hello">    <h1>{{ msg }}</h1>    <el-button>默认按钮</el-button>    <el-button @click="visible=true" type="primary">主要按钮</el-button>    <el-button type="text">文字按钮</el-button>    <el-dialog v-model="visible" title="Hello world">      <p>欢迎使用 Element</p>    </el-dialog>    <div style="">      <h2>演示better scroll</h2>      <div class="wrapper" ref="wrapper">        <ul class="content">          <li>1</li>          <li>2</li>          <li>3</li>          <li>4</li>          <li>4</li>          <li>4</li>          <li>4</li>          <li>4</li>          <li>4</li>          <li>4</li>        </ul>      </div>    </div>  </div></template><script>  import BScroll from 'better-scroll'export default {  name: 'hello',  data () {    return {      msg: 'ElementUI框架演示：',      visible:false    }  },  mounted(){      this.scroll = new BScroll( this.$refs.wrapper,{        scrollY:true,      })  }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>  .wrapper{    background-color: #e0e0e0;    height: 120px;    overflow: hidden;  }</style>

补充：

<script>  import BScroll from 'better-scroll'  export default{      name:'home',      components:{          bottom      },      created(){        console.log('created')        this.$nextTick(() => {          setTimeout(()=>{            this.initScroll()          },20)        })      },      methods:{        initScroll(){          if(!this.rScroll){            this.rScroll = new BScroll(this.$refs.wrapper,{              scrollY:true,              click:true,            })          }else {            this.rScroll.refresh();          }        }      }  }</script>