vue-scroll-box
A ScrollBox vue component, support pull-down and pull-up event.
简单的滚动盒子组件,支持鼠标和触摸操作,支持反馈pull-down、pull-up事件以支持下拉刷新和上拉加载。自带返回顶部按钮。 基于浏览器默认滚动盒子,功能简单,无复杂的设置项。
How to use / 如何使用
Install / 安装
npm install vue2-scroll-box// or install from github reponsitorynpm install https://github.com/ferrinweb/vue-scroll-box.git // or use yarn / 推荐使用 yarnyarn add vue2-scroll-box// or install from github reponsitoryyarn add https://github.com/ferrinweb/vue-scroll-box.git
Import / 引入
// global import / 全局引入Vue // import on demand in your vue component file. / 按需引入 components: ScrollBox ...
Use and demo / 使用及示例
You can ckeckout this repository and try this demo.
你可以直接检出 vue-scroll-box 源码到本地,查看示例。
<template> <div id="app"> <!-- You need to specify the size for scroll-box --> <!-- 你须要给滚动盒子设置有效的尺寸 --> <scroll-box class="hw100 scroll-box-test" ref="scrollBox" :enableDragDown="true" @pull-down="reloadList" :enableDragUp="true" @pull-up="loadMore" > <div v-if="reloaded" class="w100 grey">Reloaded!</div> <div class="w100 orange">1</div> <div class="w100 yellow">2</div> <div class="w100 green">3</div> <div class="w100 cyan">4</div> <div class="w100 blue">5</div> <div v-if="loaded" class="w100 grey">Loaded !</div> </scroll-box> <!-- These are some test buttons --> <div class="scroll-test-buttons"> <button @click="testScrollTop(0)">Scroll to Top</button> <button @click="testScrollTop(700)">Scroll to 700px</button> <button @click="testScrollTop('.cyan')">Scroll to cyan element</button> </div> </div></template> <script> name: 'App' components: ScrollBox { return reloaded: false loaded: false } methods: { // Simulate async requests using setTimeout // 模仿异步请求 } { } { // you can use vue-scroll-box's inner method 'scrollTo' // to scroll the content view to some px position or element. // 通过滚动盒子内部方法 scrollTo,你可以方便的将内容滚动至指定的像素位置、元素。 this$refsscrollBox } </script> <style> /* demo page styles, just ignore these */ html body #app margin: 0; width: 100%; height: 100%; #app font-family: 'Avenir' Helvetica Arial sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-box-test color: white; font-size: 42px; hw100 width: 100%; height: 100%; w100 font-weight: lighter; text-align: center; line-height: 2; width: 100%; height: 500px; grey background-color: #9e9e9e; orange background-color: #ff9800; yellow background-color: #fb0; green background-color: #84af4c; cyan background-color: #00bcd4; blue background-color: #2196f3; scroll-test-buttons position: absolute; top: 0; bottom: 0; left: 0; margin: auto; width: 200px; height: 110px; z-index: 3; scroll-test-buttons button background-color: aliceblue; border: darkslategrey solid 1px; padding: 5px 10px; border-radius: 3px; margin: 0 0 10px 10px; </style>
Slots / 插槽
名称 | 说明 | 默认值 |
---|---|---|
default | 滚动盒子内容 | 无 |
dragDownArea | 下拉刷新提示内容区 | <span class="drag-down-text">Release and reload</span> |
dragUpArea | 上拉加载提示内容区 | <span class="drag-down-text">Release and load more</span> |
Attributes / 属性
名称 | 说明 | 默认值 |
---|---|---|
dragDistance | 下拉或上拉最大像素尺度,值越大越不容易触发 pull-down 及 pull-up 事件 | 150 |
enableDragDown | 是否启用下拉刷新特性 | false |
enableDragUp | 是否启用上拉加载特性 | false |
enableTopButton | 是否显示返回顶部按钮 | true |
beforeText | 下拉刷新提示文本 | Release and reload |
afterText | 上拉加载更多提示文本 | Release and load more |
Methods / 方法
名称 | 说明 | 参数 |
---|---|---|
scrollUpdate | 更新滚动盒子状态 | contentUpdate: 标记内容是否有更新,仅在上拉加载完成时需要 |
scrollTo | 滚动内容至指定位置 | target:Nubmer类型为坐标,即滚动至某坐标处;String类型是为选择器,以及Dom对象类型是将滚动至指定元素处。offset: 滚动偏移量 |
disableScroll | 禁用滚动 | 无参数 |
enableScroll | 启用滚动 | 无参数 |
Events / 事件
名称 | 说明 |
---|---|
pull-down | 下拉刷新操作拖动屏幕距离超过阈值,释放拖动,则抛出该事件,仅当 enableDragDown 为 true 时有效 |
pull-up | 上拉加载操作拖动屏幕距离超过阈值,释放拖动,则抛出该事件,仅当 enableDragUp 为 true 时有效 |
Lisence
MIT Lisence.