haku-scroll
TypeScript icon, indicating that this package has built-in type declarations

1.1.7 • Public • Published

haku-scroll Build Status

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 - 组件销毁

未完成功能

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

Readme

Keywords

Package Sidebar

Install

npm i haku-scroll

Weekly Downloads

15

Version

1.1.7

License

MIT

Unpacked Size

379 kB

Total Files

26

Last publish

Collaborators

  • hakubox