scrollbar

介绍

scrollbar 插件为 BetterScroll 提供了样式美观的滚动条。

安装

npm install @better-scroll/scroll-bar --save

// or

yarn add @better-scroll/scroll-bar

使用

首先引入 scrollbar 插件，并通过静态方法 BScroll.use() 注册插件

  import BScroll from '@better-scroll/core'
  import ScrollBar from '@better-scroll/scroll-bar'

  BScroll.use(ScrollBar)

接着在 options 传入正确的配置。

  new BScroll('.bs-wrapper', {
    scrollY: true,
    scrollbar: true
  })

示例

<template>
  <div class="scrollbar">
    <div ref="scroller" class="scrollbar-bswrapper">
      <ul class="scrollbar-list">
        <li v-for="i of 40" :key="i" class="scrollbar-list-item">
          {{ `I am item ${i} `}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import BScroll from '@better-scroll/core'
  import ScrollBar from '@better-scroll/scroll-bar'

  BScroll.use(ScrollBar)

  export default {
    created() {
      this.bscroll = null
    },
    mounted() {
      this.initBscroll()
    },
    methods: {
      initBscroll() {
        this.bscroll = new BScroll(this.$refs.scroller, {
          scrollY: true,
          scrollbar: true
        })
      }
    }
  }
</script>

<style lang="stylus">
.scrollbar
  height: 100%
.scrollbar-bswrapper
  position: relative
  height: 100%
  padding: 0 10px
  border: 1px solid #ccc
  overflow: hidden
.pullup-list
  padding: 0
.scrollbar-list-item
  padding: 10px 0
  list-style: none
  border-bottom: 1px solid #ccc
.scrollbar-wrapper
  padding: 20px
  text-align: center
  color: #999
</style>

scrollbar 选项对象

fade

• 类型：boolean
• 默认值：true

当滚动停止的时候，滚动条渐隐。

interactive

• 类型：boolean
• 默认值：false

滚动条是否可以交互。