haku-scroll 
vue滚动条组件
示例图
说明
😃 一款定制化滚动条，目前仅兼容PC端，兼容性为IE9+，之后会考虑增加移动端的滚动功能。
示例具体可参考 App.vue页面
安装
npm install haku-scroll --save
引入
//全局注册组件
import hakuScroll from 'haku-scroll'
Vue.use(hakuScroll)
//单组件引用
import hakuScroll from 'haku-scroll'
new Vue({
components: { ...hakuScroll }
})
区域 haku-block
组件调用
<haku-block>
...
</haku-block>
属性
| 属性名 |
类型 |
默认值 |
描述 |
| contentClass |
String |
- |
内容class样式 |
| contentStyle |
String |
- |
内容style样式 |
| anime |
Boolean |
true |
是否启用平滑移动效果 |
| wheelstep |
Number |
100 |
单步鼠标滚动距离 |
| wheeltime |
Number |
200 |
单步鼠标滚动时间 |
| wheelseaing |
String |
'sineOut' |
滚动时的运动曲线，参考 liike
|
| vertical |
Boolean |
true |
纵向滚动条是否展现 |
| horizontal |
Boolean |
false |
横向滚动条是否展现 |
| watchSubTree |
Boolean |
false |
是否监听子节点树 |
| parentScroll |
Boolean |
false |
wheel滚动事件延伸至父容器 |
| hideButton |
Boolean |
true |
隐藏按钮 |
函数
| 函数名 |
参数 |
返回值 |
描述 |
| scrollTo |
{ x:Number,y:Numbere,anime:Boolean,... } |
- |
滚动到某处 |
| refresh |
config |
- |
刷新/重置滚动条基本属性 |
| getScrollTop |
- |
Number |
获取距离视窗顶部的像素 |
| getScrollLeft |
- |
Number |
获取距离视窗左边缘的像素 |
事件
| 事件名 |
返回参数 |
描述 |
| oninit |
- |
组件初始化 |
| ondestroy |
- |
组件销毁 |
滚动条 haku-scroll
组件调用
<haku-scroll :value.sync="value" :max-value="maxvalue">
...
</haku-scroll>
属性
| 属性名 |
类型 |
默认值 |
描述 |
| disabled |
Boolean |
false |
是否禁用 |
| hidden |
Boolean |
false |
是否隐藏 |
| type |
String |
- |
滚动条类型（vertical/horizontal） |
| min |
Number |
0 |
可操作最小值 |
| max |
Number |
0 |
可操作最大值（0为不设最大值） |
| step |
Number |
0 |
步长（0为不设步长） |
| size |
Number |
- |
滚动条滑块大小 |
| value |
Number |
0 |
滚动条滚动的值 |
| maxValue |
Number |
- |
最大值 |
| minValue |
Number |
0 |
最小值 |
| hideBtn |
Boolean |
true |
隐藏按钮 |
函数
| 函数名 |
参数 |
返回值 |
描述 |
| scrollTo |
value, isAdd = false |
- |
滚动到某处 |
| refresh |
- |
- |
刷新/重置滚动条基本属性 |
事件
| 事件名 |
返回参数 |
描述 |
| oninit |
- |
组件初始化 |
| ondestroy |
- |
组件销毁 |
未完成功能
