# vue-app-scroller
> Improved version of the scroll plug-in, support for drop-down refresh and pull up loading, and can support real-time event monitoring to obtain the location of the scroll
Latest version **1.0.6** (published 2019-07-17) · MIT license · 0 weekly downloads
## Install
```sh
npm install vue-app-scroller
pnpm add vue-app-scroller
yarn add vue-app-scroller
bun add vue-app-scroller
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.6 |
| Published | 2019-07-17 |
| First published | 2019-03-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >= 6.0.0 |
| Dependencies | 0 |
| Unpacked size | 448.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | joozh |
| Maintainers | joozh |
| Keywords | app, vue, scroll, scroller, vue-scroller, vue-scroll, vue-app-scroller |
## Links
- npm: https://www.npmjs.com/package/vue-app-scroller
- Repository: https://github.com/JooZh/vue-app-scroller
- Homepage: https://github.com/JooZh/vue-app-scroller#readme
- Issues: https://github.com/JooZh/vue-app-scroller/issues
- npm.io page: https://npm.io/package/vue-app-scroller
## Recent versions
- 1.0.6 (latest) — 2019-07-17
- 1.0.5 — 2019-07-11
- 1.0.4 — 2019-04-27
- 1.0.3 — 2019-04-19
- 1.0.2 — 2019-04-07
- 1.0.1 — 2019-04-01
- 1.0.0 — 2019-03-29
## README
# vue-app-scroller
根据 scroller.js 和 vue-scroller 改良的滚动插件，优化下拉刷新和上拉加载，优化获取滚动位置内容，可以适配多种类型的滑动效果要求。
## 使用前提
需要 vue 2.x,
需要支持 vue 组件解析的工程结构。
## 在线演示
[Demo演示示例](https://joozh.github.io/vue-app-scroller/examples)
## 安装使用
安装
```bash
$ npm install vue-app-scroller -S
```
使用
```javascript
import VueAppScroller from 'vue-app-scroller';
// use 以后就会添加一个 vue-app-scroller 组件
Vue.use(VueAppScroller);
```
```vue
```
* .scroller-container 为滚动区域的外容器 需要限制宽度和高度，并且采用定位的方式做为滚动容器父节点。这里不需要对溢出进行处理，组件会自动处理溢出内容，只需要设置定位和宽高内容即可。
```css
.scroller-container{
position: absolute; // 定位元素 relative,fixed
top:44px; // 为导航预留高度
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 500px;
}
```
## 参数
| 参数 | 类型 | 默认 | 说明 | 必填 |
| ----------------- | -------------------- | --------- | ------------------------------------------------------------ | ------------------------------ |
| scrollingX | Boolean | false | 是否横向滚动 | X 或者 Y |
| scrollingY | Boolean | false | 是否纵向滚动 | X 或者 Y |
| mousewheel | Boolean | false | 是否开启鼠标滚动 | |
| snapping | Boolean,Number,Array | false | 是否开启网格移动 传 true 默认为 50px | |
| snappingType | String | "default" | 可选值 ['select','default'],如果使用 select 会以选择器的模式展示 | |
| snappingSelect | Number | 0 | snappingType 为 select 模式下当前选中的行或者列 | |
| snappingListIndex | Number | 0 | 多列模式下当前指定的当前列，用于区分当前选择的值。 | 多列模式【选择器模式】必须指定 |
| snappingComplete | Function | NOOP | 选择器切换选择后执行的函数，用于得到返回值，使用方式见 参数详细说明 | 需要得到值必填 |
| paging | Boolean | false | 是否开启滑动分屏 | |
| bouncing | Boolean | true | 是否使用回弹效果 | |
| animating | Boolean | true | 是否使用动画 | |
| duration | Number | 250 | 由 scrollTo 触发的动画持续时间 ms | |
| data | Array,Object,Number | [] | 监听数据，更新滚动视图,如果使用number，建议是累加值 | * |
| scrollingComplete | Function | NOOP | 每次滚动事件完成后需要执行的方法 | |
### 参数详细说明
* snapping : 传参方式为 Array 格式 [width,height] , 传参方式为 Number 格式，网格宽高同值
* snappingType: 为 select 模式下，建议行数为奇数行效果最佳。可参考 示例
* snappingComplete: 接收一个参数 该参数内容为
```js
snappingComplete(e){
console.log(e) // {listIndex:0,selectIndex:0}
}
```
## 方法
所有方法都通过引用模式调用
```vue
export default {
data () {
return {
scroller:null
}
},
mounted(){
this.scroller = this.$refs.scroller
},
methods:{
getAttr(){
let direction = this.scroller.getAttr('scrollDirection');
}
}
}
```
| 方法名称 | 参数 | 返回值 | 说明 |
| ---------- | ------------- | ------ | ------------------------------------------------------------ |
| refresh | 无 | 无 | 当数据更新滚动视图无法更新时候，手动刷新 |
| stopScroll | 无 | 无 | 主动停止当前动画和滚动效果。 |
| scrollTo | x, y, animate | 无 | x： 为滚动到的横向位置，y： 为滚动到的纵向位置，animate：是否需要使用动画 |
| publish | x, y, animate | 无 | 同上 该方法 会实时获取滚动位置，scrollTo 会在滚动完成后 更新滚动位置。 |
| getAttr | name | 多种 | 获取当前滚动的一些重要属性 参考下表 |
| setAttr | key,value | 无 | 设置当前滚动的一些重要属性 |
##### 可操作属性表
| 可获取的属性名称 | 说明 | 可设置 | 可读取 |
| ---------------- | ---------------------------------------------------- | ------ | ------ |
| scrollDirection | ['top','right','left','bottom'] ，返回当前滑动的方向 | 🌚 | 🌝 |
| enableScrollX | [true,false] 横向滚动 | 🌝 | 🌝 |
| enableScrollY | [true,false] 纵向滚动 | 🌝 | 🌝 |
| minWidthScrollX | number 返回当前最小横向滚动距离 | 🌚 | 🌝 |
| minHeightScrollY | number 返回当前最小纵向滚动距离 | 🌚 | 🌝 |
| maxWidthScrollX | number 返回当前最大横向滚动距离 | 🌚 | 🌝 |
| maxHeightScrollY | number 返回当前最大纵向滚动距离 | 🌚 | 🌝 |
## 事件
| 事件名称 | 类型 | 说明 | 传参 | 参数类型 | 返回 |
| ------------- | -------- | -------------------- | ---- | -------- | ------------------- |
| onScroll | Function | 监听页面滚动处理函数 | e | Object | {x:0,y:0} |
| onPullRefresh | Function | 监听下拉刷新处理函数 | done | Function | 更新完毕 done() |
| onReachBottom | Function | 监听上拉加载处理函数 | e | Boolean | {hasMore:true/fase} |
#### 事件函数使用
为了减少参数传递，对事件采用绑定函数的方式进行使用。
```vue
```
* 使用一个刷新标志位置 isRefresh 来保证每次只有一个刷新函数在运行，避免多次重复的下拉刷新
* 上拉加载会自动判断当前是否还能继续加载。
```js
export default {
data () {
return {
isRefresh:false,
x:0,
y:0,
pageNum:1,
items: []
}
},
methods: {
// 滚动事件监听
scroll(e){
this.x = e.x
this.y = e.y
},
// 下拉事件监听
refresh(done) {
if(!this.isRefresh){
this.isRefresh = true // 阻止重复操作
let items = []
for (let i = 1; i <= 20; i++) {
items.push(i + 'my-data')
}
setTimeout(() => {
this.items = items // 重置数据
this.pageNum = 1 // 重置分页
this.isRefresh = false // 重置刷新状态
done() // 关闭刷新状态
}, 1500)
}
},
// 触底事件监听 会自动判断还有无更多数据
loadingMore(e) {
let items = []
for (let i = 0; i < 20; i++) {
items.push(i + 'my-data')
}
setTimeout(() => {
this.items = this.items.concat(items)
this.pageNum = this.pageNum + 1
}, 1500)
},
}
}
```
## 其他
在 npm 包中的 dist 目录下有打包和压缩过后的 vue-app-scroller.min.js 可供使用。
自定义样式和自定义图标，暂未开发….
---
_Source: https://npm.io/package/vue-app-scroller · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._