vue-scroll-box

> A ScrollBox vue component, support pull-down and pull-up event.

> 简单的滚动盒子组件，支持鼠标和触摸操作，支持反馈pull-down、pull-up事件以支持下拉刷新和上拉加载。自带返回顶部按钮。
> 基于浏览器默认滚动盒子，功能简单，无复杂的设置项。


How to use / 如何使用

$3

``javascript
npm install vue2-scroll-box
// or install from github reponsitory
npm install https://github.com/ferrinweb/vue-scroll-box.git

// or use yarn / 推荐使用 yarn
yarn add vue2-scroll-box
// or install from github reponsitory
yarn add https://github.com/ferrinweb/vue-scroll-box.git
`

$3

`javascript
// global import / 全局引入
import ScrollBox from 'vue-scroll-box'
Vue.use(ScrollBox)

// import on demand in your vue component file. / 按需引入
import ScrollBox from 'vue-scroll-box'
export default {
components: {
ScrollBox
},
...
}
`

$3

> You can ckeckout this repository and try this demo.

> 你可以直接检出 vue-scroll-box 源码到本地，查看示例。

`javascript





``

$3

名称 | 说明 | 默认值
|---|---|---|
default | 滚动盒子内容 | 无
dragDownArea | 下拉刷新提示内容区 | <span class="drag-down-text">Release and reload</span>
dragUpArea | 上拉加载提示内容区 | <span class="drag-down-text">Release and load more</span>

$3

名称 | 说明 | 默认值
|---|---|---|
dragDistance | 下拉或上拉最大像素尺度，值越大越不容易触发 pull-down 及 pull-up 事件 | 150
enableDragDown | 是否启用下拉刷新特性 | false
enableDragUp | 是否启用上拉加载特性 | false
enableTopButton | 是否显示返回顶部按钮 | true
beforeText | 下拉刷新提示文本 | Release and reload
afterText | 上拉加载更多提示文本 | Release and load more

$3

名称 | 说明 | 参数
|---|---|---|
scrollUpdate | 更新滚动盒子状态 | contentUpdate: 标记内容是否有更新，仅在上拉加载完成时需要
scrollTo | 滚动内容至指定位置 | target：Nubmer类型为坐标，即滚动至某坐标处；String类型是为选择器，以及Dom对象类型是将滚动至指定元素处。offset: 滚动偏移量
disableScroll | 禁用滚动 | 无参数
enableScroll | 启用滚动 | 无参数

$3

名称 | 说明
|---|---|
pull-down | 下拉刷新操作拖动屏幕距离超过阈值，释放拖动，则抛出该事件，仅当 enableDragDown 为 true 时有效
pull-up | 上拉加载操作拖动屏幕距离超过阈值，释放拖动，则抛出该事件，仅当 enableDragUp 为 true 时有效

Lisence

MIT Lisence.