|
1 | | -# Vue-Super-Scroll |
2 | | -A pull to refresh and lnfinite scroll component for vue.js |
| 1 | +# Vue-Pull-To |
| 2 | +A pull to refresh and load more and an infinite scroll of the vue.js component. |
3 | 3 |
|
4 | | -working~ |
| 4 | +一个集成了下拉刷新、上拉加载、无限滚动加载的Vue组件。 |
| 5 | + |
| 6 | +[](https://github.com/stackjie/vue-pull-to/issues) |
| 7 | +[](https://github.com/stackjie/vue-pull-to/stargazers) |
| 8 | +[](https://github.com/stackjie/vue-pull-to/master/LICENSE) |
| 9 | +[](https://www.npmjs.com/package/vue-pull-to) |
| 10 | + |
| 11 | +## Examples |
| 12 | + |
| 13 | + |
| 14 | +## Installation |
| 15 | +``` |
| 16 | + npm install vue-pull-to --save |
| 17 | +``` |
| 18 | + |
| 19 | +## Use Setup |
| 20 | +``` vue |
| 21 | +<template> |
| 22 | + <div> |
| 23 | + <pull-to :top-load-method="refresh"> |
| 24 | + <ul> |
| 25 | + <li>item</li> |
| 26 | + <li>item</li> |
| 27 | + <li>item</li> |
| 28 | + <li>item</li> |
| 29 | + <li>item</li> |
| 30 | + <li>item</li> |
| 31 | + <li>item</li> |
| 32 | + <li>item</li> |
| 33 | + </ul> |
| 34 | + </pull-to> |
| 35 | + </div> |
| 36 | +</template> |
| 37 | +
|
| 38 | +<script> |
| 39 | + import PullTo from 'vue-pull-to' |
| 40 | + |
| 41 | + export default { |
| 42 | + name: 'example', |
| 43 | + components: { |
| 44 | + PullTo |
| 45 | + }, |
| 46 | + methods: { |
| 47 | + refresh(loaded) { |
| 48 | + setTimeout(() => { |
| 49 | + this.dataList.reverse(); |
| 50 | + loaded('done'); |
| 51 | + }, 2000); |
| 52 | + } |
| 53 | + } |
| 54 | + } |
| 55 | +</script> |
| 56 | + ``` |
| 57 | + 组件会默认占据父元素的百分之百高度。props `top-load-method`和`bottom-load-method`会默认传进一个`loaded`参数，该参数是一个改变组件加载状态的函数，必须调用一次`loaded`不然组件就会一直处于加载状态，如果执行`loaded('done')`组件内部状态就会变成成功加载的状态，`loaded('fail')`为失败。 |
| 58 | + |
| 59 | + [更多使用示例请参考Examples的代码](https://github.com/stackjie/vue-pull-to/tree/master/examples) |
| 60 | + |
| 61 | + ## API Docs |
| 62 | + |
| 63 | + ### props |
| 64 | +| 属性 | 说明 | 类型 | 默认值 | |
| 65 | +| --- | --- | --- | --- | |
| 66 | +| distance-index | 滑动的阀值（值越大滑动的速度越慢） | Number | 2 | |
| 67 | +| top-block-height | 顶部在滚动容器外的块级元素区域高度 | Number | 50 | |
| 68 | +| bottom-block-height | 底部在滚动容器外的块级元素区域高度 | Number | 50 | |
| 69 | +| top-load-method | 顶部下拉时执行的方法 | Function | | |
| 70 | +| bottom-load-method | 底部上拉时执行的方法 | Function | | |
| 71 | +| is-throttle | 是否截流`top-pull`和`bottom-pull`自定义事件的触发以保证性能 | Boolean | true | |
| 72 | +| top-config | 滚动容器顶部信息的一些配置 | Object | 默认配置 | |
| 73 | +| bottom-config | 滚动容器底部信息的一些配置 | Object | 默认配置 | |
| 74 | + |
| 75 | +`topConfig`和`bottomConfig`可配置的选项和默认配置项的值 |
| 76 | +``` javascript |
| 77 | +const TOP_DEFAULT_CONFIG = { |
| 78 | + pullText: '下拉刷新', // 下拉时显示的文字 |
| 79 | + triggerText: '释放更新', // 下拉到触发距离时显示的文字 |
| 80 | + loadingText: '加载中...', // 加载中的文字 |
| 81 | + doneText: '加载完成', // 加载完成的文字 |
| 82 | + failText: '加载失败', // 加载失败的文字 |
| 83 | + loadedStayTime: 400, // 加载完后停留的时间ms |
| 84 | + stayDistance: 50, // 触发刷新后停留的距离 |
| 85 | + triggerDistance: 70 // 下拉刷新触发的距离 |
| 86 | +}; |
| 87 | + |
| 88 | +const BOTTOM_DEFAULT_CONFIG = { |
| 89 | + pullText: '上拉加载', |
| 90 | + triggerText: '释放更新', |
| 91 | + loadingText: '加载中...', |
| 92 | + doneText: '加载完成', |
| 93 | + failText: '加载失败', |
| 94 | + loadedStayTime: 400, |
| 95 | + stayDistance: 50, |
| 96 | + triggerDistance: 70 |
| 97 | +}; |
| 98 | +``` |
| 99 | + ### slots |
| 100 | +| 名称 | 说明 | scope | |
| 101 | +| --- | --- | --- | |
| 102 | +| default | 默认slot滚动容器的内容 | |
| 103 | +| top-block | 滚动容器外顶部的内容（支持作用域slot需用`template`标签加上`scope`属性）| `state`：当前的状态、`state-text`：状态对应的文本 | |
| 104 | +| bottom-block | 滚动容器外底部的内容（支持作用域slot需用`template`标签加上`scope`属性）| `state`：当前的状态、`state-text`：状态对应的文本 | |
| 105 | + |
| 106 | + ### events |
| 107 | +| 事件名 | 说明 | |
| 108 | +| --- | --- | |
| 109 | +| top-state-change | 顶部状态发生了改变时触发，第一个参数为当前的状态 | |
| 110 | +| bottom-state-change | 底部状态发生了改变时触发，第一个参数为当前的状态 | |
| 111 | +| top-pull | 下拉时触发，第一个参数为当前拉动的距离值，默认会被截流，可配置props `isThrottle`来实时触发 | |
| 112 | +| bottom-pull | 上拉时触发，第一个参数为当前拉动的距离值，默认会被截流，可配置props `isThrottle`来实时触发 | |
| 113 | +| infinite-scroll | 当滚动容器滚动到底部时触发 | |
0 commit comments