haku-scroll

vue滚动条组件

示例图

示例DEMO

说明

:smiley: 一款定制化滚动条，目前仅兼容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 | - | 组件销毁

未完成功能

• [x] 基本功能
• [x] 变化监听
• [x] 鼠标中键滚动
• [x] 自定义滚动条样式
• [x] 支持TypeScript
• [x] 自动隐藏
• [x] 滚动限制
• [x] 滚动事件钩子
• [x] 禁用
• [ ] 扩展至移动端
• [ ] 拆分为独立js组件
• [ ] 自定义工具按钮