基于 vue 实现的 pc 端滚动条组件

开始使用

下载

npm install @wozien/vue-scrollbar

引入组件

<template>
  <vue-scrollbar :show-type="hover" ref="scroll">
    <!-- 滚动内容包含在一个块内 -->
    <div class="container">
      <!-- 滚动内容 -->
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <!-- ... -->
    </div>
  </vue-scrollbar>
</template>

<script>
  import VueScrollbar from '@wozien/vue-scrollbar';

  export default {
    mounted() {
      this.$ref.scroll.scrollTo(0, 100);
    },

    components: {
      VueScrollbar
    }
  };
</script>

说明

属性

show-type:String: 滚动条显示方式，默认为一直显示

hide: 隐藏

hover: 移入显示

方法

scrollTo(x,y): 移动到指定位置

x: 横坐标

y: 纵坐标

refresh(): 刷新，重新计算高度

scrollTop(): 移动最顶部

scrollBottom(): 移动最底部

scrollLeft(): 移动最左边

scrollRight(): 移动最右边