# ScrollBar 滚动条 1.0.0+
ScrollBar组件是为了统一浏览器滚动条的样式，解决内置滚动条样式丑陋。
ScrollBar是通过监听内置滚动条，在滚动任务中使用Promise改变其位置信息，既解决了实时性的问题，也优化了ScrollBar的性能。
# 基本用法
下面介绍基本用法，大多数情况你不需要关系内部发生了什么。
- 00+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 10+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 20+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 30+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 40+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 50+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 60+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 70+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 80+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 90+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 100+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 110+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 120+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 130+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 140+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 150+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 160+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 170+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 180+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 190+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 200+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 210+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 220+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 230+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 240+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 250+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 260+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 270+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 280+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 290+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 300+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 310+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 320+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 330+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 340+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 350+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 360+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 370+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 380+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 390+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 400+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 410+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 420+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 430+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 440+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 450+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 460+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 470+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 480+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 490+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 500+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 510+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 520+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 530+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 540+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 550+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 560+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 570+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 580+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 590+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 600+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 610+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 620+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 630+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 640+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 650+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 660+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 670+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 680+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 690+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 700+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 710+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 720+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 730+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 740+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 750+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 760+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 770+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 780+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 790+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 800+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 810+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 820+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 830+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 840+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 850+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 860+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 870+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 880+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 890+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 900+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 910+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 920+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 930+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 940+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 950+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 960+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 970+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 980+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
- 990+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0+0
你只需要将接管滚动条的元素放置于ScrollBar组件下，并且给定宽高。后面的事情就交给它。注意：ScrollBar里面只能有一个根元素
<template>
<div style="width: 300px;margin: 0 auto">
<ve-scroll>
<ul style="height: 300px">
<li v-for="item in array" :key="item" >
{{ item + str }}
</li>
</ul>
</ve-scroll>
</div>
</template>
<script>
export default {
data() {
return {
array: Array(100).fill(null).map((o, i) => i),
str: Array(20).fill(0).join('+')
}
},
}
</script>
# Bar 样式
在某些场景下，可能要一直显示滚动条，或者控制滚动条的大小。
- 0
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
如果要控制滚动条的大小，可以传入size，它支持字符串或数字。如果要一直显示滚动条，可以传入always，它接受一个Boolean类型的值
<template>
<div style="width: 300px;margin: 0 auto">
<ve-scroll size="8" always>
<ul style="height: 300px">
<li v-for="item in array" :key="item" >
{{ item }}
</li>
</ul>
</ve-scroll>
</div>
</template>
<script>
export default {
data() {
return {
array: Array(100).fill(null).map((o, i) => i)
}
},
}
</script>
# ScrollBar 属性
| Parameter | Description | Type | Optional value | Defaults |
|---|---|---|---|---|
| size | 滚动条大小 | string / number | - | 6 |
| always | 是否要一直显示滚动条 | boolean | true / false | false |