@weier/w-scrollbar

• 滚动条容器

// 安装
npm i @weier/w-scrollbar -S

// 代码引入（可选）
import Vue from 'vue'
import WScrollbar from '@weier/w-scrollbar'
Vue.use(WScrollbar)

基础用法

容器外的宽高需已知(可滚动即可) noresize 如果 container 尺寸不会发生变化，最好设置它可以优化性能

:::demo

import { defineComponent } from '@vue/composition-api'
import WScrollbar from '@weier/w-scrollbar'

export default defineComponent({
  setup() {

  },
  render() {
    const n = []
    for (let i = 0; i < 100; i++) {
      n.push(i)
    }
    return (
       <div class="WScrollbar-father" style={{
        height: '200px',
        border: '1px dashed #dedede'
       }}>
        <WScrollbar autoShow={false}>
          <ul class="content" style="width: 120%">
            {
              n.map(index => <li key={index}>{index}</li>)
            }
          </ul>
        </WScrollbar>
      </div>
    )
  }
})

:::

w-scrollbar Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---- | ---- | --------- | ---------- | ------- | | zIndex | 滚动条层级 | Number | —— | 1 |
| autoShow | 是否移入时显示 | Boolean | true/false | true | | light | 滚动条的颜色是否亮色 | Boolean | true/false | false | | noresize | 如果 container 尺寸不会发生变化，最好设置它可以优化性能 | Boolean | true/false | false |

w-scrollbar Events

| 事件名称 | 说明 | 参数 | | ---- | ---- | --------- | | reach-top | 到达顶部 | 无 | | reach-bottom | 到达底部 | 无 | | reach-left | 到达最左边 | 无 | | reach-right | 到达最右边 | 无 | | scroll | 鼠标滚动时触发 | scrollInfo(Object) |

scrollInfo 参数

| 参数 | 说明 | 类型 | | ---- | ---- | --------- | | scrollTop | 当前滚动容器的scrollTop | Number | | scrollLeft | 当前滚动容器的scrollLeft | Number |

w-scrollbar Methods

| 方法名 | 说明 | 参数 | | ---- | ---- | --------- | | scrollTo | 滚动容器至-位置 | scrollTop(top/bottom/left/right/end/(Number)), scrollLeft(Number)(可选) |

w-scrollbar-slot

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---- | ---- | --------- | ---------- | ------- | | 默认值 | 默认内容 | —— | —— | —— |