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>