haku-scroll

vue滚动条组件

示例图

示例DEMO

说明

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

未完成功能

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