npm.io
0.0.4 • Published 3 years ago

scrollbar-vue2

Licence
ISC
Version
0.0.4
Deps
0
Size
20 kB
Vulns
0
Weekly
0
Stars
1

基于 vue2 的虚拟滚动条

$ npm install scrollbar-vue2 --save
$ yarn add scrollbar-vue2

example

  <template>
   <div class="tag">
      <Scrollbar :always="true" class="scrollbar">
        <div class="tags" style="height: 200px">
          <div v-for="t in 800" :key="t">{{ t }}</div>
        </div>
      </Scrollbar>
    </div>
  </template>
  <script>
  import Scrollbar from "scrollbar-vue2";
  export default {
    components: { Scrollbar }
  }
  </script>
  <style lang="scss">
  .tag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(116, 116, 116, 0.281);
    height: 100px;
    .scrollbar {
      width: 100%;
      .tags {
        display: flex;
        width: 1px;
      }
    }
  }
  </style>

参数说明

prop type description default
height [String, Number] 滚动条的高度 ""
maxHeight [String, Number] 滚动条的最大高度 ""
native Boolean 是否使用原生滚动条 false
wrapStyle [String, Object, Array] wrap的样式 ""
wrapClass [String, Array] wrap的Class ""
viewStyle [String, Array] view的样式 ""
viewClass [String, Array] view的Class ""
noresize Boolean 如果container尺寸不会发生变化,最好设置它可以优化性能
tag String 元素tag div
always Boolean 总是显示滚动条
minSize Number 滚动条的最小尺寸 20