滚动条 scroller
1) 集合
import scroller from 'vue-human/suites/scroller'
注:核心组件,已经包含在 core suites 内。
2) 组件目录
- mn-scroller
3) mn-scroller 组件
在页面的开发过程中,每个页面都会碰到的一个需求就是 ———— 滚动条。掌控好滚动条,对于提高用户体验至关重要。比如在开发微信 HTML5 页面时,如何避免过度拖拽产生露底,这就是一个常见的需求。又如:拉至顶部或底部的动画效果,页面返回时的滚动条记忆等等,这些都是对一个滚动条基本的需求。
Vue Human 的滚动条是基于 div 和 overflow 实现,并未使用 transform 或者 body 的滚动条。
3.1 属性
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
save | 是否保存滚动条位置 | boolean | - | true |
name | 当前滚动条的名称,如果一个 body 内有多个 scroller 存在,请添加该字段 | string | - | undefined |
mode | 保存的路由模式 | string | path 或 fullPath | path |
scrollbar | 是否显示滚动条(尽限 Chrome, Safari, iOS, Edge, IE >= 11) | boolean | - | false |
3.2 触发事件
事件名 | 说明 | 参数 |
---|---|---|
scroll | 滚动事件 | $event 和 this |
top | 触顶事件 | $event 和 this |
bottom | 触底事件 | $event 和 this |
touchstart | touchstart 事件 | $event 和 this |
touchmove | touchmove 事件 | $event 和 this |
touchend | touchend 事件 | $event 和 this |