vue使用better-scroll

better-scroll是D8黄轶老师基于iscroll重写的一个插件，在vue中使用这个插件能给app带来流畅性，提高了用户体验。

封面.jpg

一、安装

这个步骤非常重要，之前是通过npm install better-scroll --save 来安装，这样安装的是最新版本。但是，实战过程中发现了一个非常严重的bug，多次通过路由切换组件页面滚动会无效，困扰了我整整两天。
于是，上度娘，发现根本没有我的类似情况。
于是，我猜测是版本问题，然后在package.json里手动安装0.1.15版本。最后解决了这个问题。

npm install

二、html结构

div.wrapper>div.content>ul>li

在这里，分成4层结构。最外层一定要设置宽度以及定位，外层高度要100%，只能滚动第一个li，因此我们把元素全放到li标签里即可。

.wrapper{
  width: 100%;
  position:absolute;
  top: 45px;
  bottom: 50px;
  overflow: hidden;
  z-index: 1;
}
.content{
  height:100%;
}

三、初始化

首先要引入组件，需要dom结构加载完成时才执行初始化。因此，需要用上钩子函数created()或者mounted()。

<div class="wrapper" ref="wrapper">
  <div class="content>
    <ul>
      <li></li>
    </ul>
  </div>
</div>

import BScroll from 'better-scroll'
mounted() {
    //即定时器 20ms
      this.$nextTick(() => {
        //$refs绑定元素
        if(!this.scroll){
            this.scroll = new BScroll(this.$refs.wrapper, {
            //开启点击事件 默认为false
            click:true
        })
        // console.log(this.scroll)
        }else if(!this.$refs.wrapper){
            return
        }
        else{
            this.scroll.refresh()
        }
      })
  }

四、优点

1.体验像原生：滚动非常流畅，而且没有滚动条。
2.滚动位置固定：在vue中通过路由切换页面时组件会自动滚动到顶部，需要监听滚动行为才能让滚动位置固定，better-scroll解决了这个问题。

五、最后

如果这篇文章帮助到了你，麻烦点个赞~

demo.gif