滚动条 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

results matching ""

    No results matching ""