A pull-down refresh and pull-up load more and infinite scroll component for Vue.js.
zh-CN中文文档
examples
npm install vue-pull-to --save
<template> <div> <pull-to:top-load-method="refresh"> <ulv-for="item in dataList"> <li>{{ item }}</li> </ul> </pull-to> </div> </template><script>importPullTofrom'vue-pull-to'import {fetchDataList }from'api'exportdefault { name:'example', components: { PullTo },data() {return { dataList: [] } }, methods: {refresh(loaded) {fetchDataList() .then((res)=> {this.dataList=res.data.dataListloaded('done') }) } } }</script>The component will occupy 100% height of the parent element by default. props top-load-method and bottom-load-method will default to a loaded parameter, which is a function that changes the state of the component's load, and must be called once loaded. The component will always be loaded, ifloaded('done') The internal state of the component will become a successful state of loading,loaded('fail') for the failure.
More usage examples
| Attribute | Description | type | Default |
|---|
| distance-index | Slip the threshold (the greater the value the slower the sliding) | Number | 2 |
| top-block-height | The height of the block element area outside the top of the scroll container | Number | 50 |
| bottom-block-height | The height of the block element area outside the scrolling container | Number | 50 |
| wrapper-height | The height of the scrolling container | String | '100%' |
| top-load-method | Top drop-down method | Function | |
| bottom-load-method | Bottom pull-up method | Function | |
| is-throttle-top-pull | Whether the disable of thetop-pull throttle event is triggered to ensure performance if the real-time trigger is set to false | Boolean | true |
| is-throttle-bottom-pull | Whether the disable of thebottom-pull throttle event is triggered to ensure performance if the real-time trigger is set to false | Boolean | true |
| is-throttle-scroll | Whether the disable of thescroll throttle event is triggered to ensure performance if the real-time trigger is set to false | Boolean | true |
| is-touch-sensitive | Whether to handle touch events | Boolean | true |
| is-scroll-sensitive | Whether to handle scroll events | Boolean | true |
| is-top-bounce | Whether to enable the pull-down bounce effect | Boolean | true |
| is-bottom-bounce | Whether to enable the pull-up bounce effect | Boolean | true |
| is-bottom-keep-scroll | Whether to make the scroll container stay in place after completing the pull-down method | Boolean | false |
| top-config | Configuration for the topmost part of the scroll container | Object | default config |
| bottom-config | Configuration for the bottommost part of the scroll container | Object | default config |
topConfig andbottomConfig Configurable options and default configuration item values
constTOP_DEFAULT_CONFIG={pullText:'下拉刷新',// The text is displayed when you pull downtriggerText:'释放更新',// The text that appears when the trigger distance is pulled downloadingText:'加载中...',// The text in the loaddoneText:'加载完成',// Load the finished textfailText:'加载失败',// Load failed textloadedStayTime:400,// Time to stay after loading msstayDistance:50,// Trigger the distance after the refreshtriggerDistance:70// Pull down the trigger to trigger the distance}constBOTTOM_DEFAULT_CONFIG={pullText:'上拉加载',triggerText:'释放更新',loadingText:'加载中...',doneText:'加载完成',failText:'加载失败',loadedStayTime:400,stayDistance:50,triggerDistance:70}| Name | Description | scope |
|---|
| default | The default slot scrolls the contents of the container | |
| top-block | Scroll the contents of the top of the container outer (support the scope slot need to usetemplate tag with scopeattribute) | state：Current state、state-text：State corresponding to the text |
| bottom-block | Scroll the contents of the bottom of the container outer (support the scope slot need to usetemplate tag with scopeattribute) | state：Current state、state-text：State corresponding to the text |
| name | Description |
|---|
| top-state-change | When the top state has changed, the first parameter is the current state |
| bottom-state-change | When the bottom state has changed, the first parameter is the current state |
| top-pull | Pull down the trigger, the first parameter for the current pull of the distance value, the default will be throttle, configisThrottle to real-time trigger |
| bottom-pull | Pull up the trigger, the first parameter for the current pull of the distance value, the default will be throttle, configisThrottle to real-time trigger |
| infinite-scroll | Triggered when the scroll container scrolls to the end |
| scroll | When scrolling, the event callback function, the first parameter, is the nativeevent object |
