vue之better-scroll

之前我写的better-scroll，横向滚动到最后滚动条就消失了。下面这个例子就是解决方法：滚动到最后滚动条依然显示并且可以拖动滚动条，也可拖动内容滚动。找了很久。。最后滚动条用的插件本身的。页面标签overflow: hidden了。
图片：

图片1

滚动最后滚动条消失

消失了

滚动到最后滚动条不消失，也就是下面代码的实现。

没有消失

1.下载

npm install better-scroll --save

2.在相应页面引入

import BScroll from 'better-scroll'

3.使用

<template>
  <div>
      <div class="home" ref="wrap">
          <div ref="tab">
              <p>111</p>
              <p>222</p>
              <p>333</p>
              <p>444</p>
              <p>555</p>
              <p>666</p>
              <p>777</p>
              <p>888</p>
          </div>
      </div>
  </div>
</template>
<script>
    import BScroll from 'better-scroll'
    export default {
        name: '',
        data() {
            return {

            }
        },
        created() {
            this.$nextTick(() => {
                let scroll = {
                    startX: 0,
                    //click: true,
                    scrollX: true,
                    scrollY: false,
                    // 这个scrollbar就是重点！！！！
                    scrollbar:{
                        fade: false,
                        interactive: true,
                    }
                }
                //标签宽度，动态获得
                this.$refs.tab.style.width = 8*120 + "px"
                if (!this.scroll) {
                    this.scroll = new BScroll(this.$refs.wrap,scroll);
                } else {
                    // 如果有重新计算宽度的需求
                      this.scroll.refresh();
                     this.scroll = new BScroll(this.$refs.wrap,scroll);
                }
            })
        }
    }
</script>

<style>
    .index{
        width: 100%;
        height: 100%;
    }
    .home{
        width: 500px;
        height: 200px;
        margin: 50px;
        overflow: hidden;
        position: relative;
    }
    .home p{
        width: 100px;
        height: 150px;
        float: left;
        border:1px solid red;
    }
</style>

这是个完整的例子，复制自行修改即可。
注意点：
1.我用的是better-scroll插件自带的滚动条，前提是ref="wrap"的标签必须position:relative. 因为这个滚动条样式是定位。
api地址：http://ustbhuangyi.github.io/better-scroll/doc/api.html#refresh
2.refresh : 重新计算滚动条