v-pull-to-refresh
v-pull-to-refresh
Vue PullToRefresh Component.
Install
npm install --save v-pull-to-refresh
Usage
import PullToRefresh from 'v-pull-to-refresh';
export default {
data () {
return {
list: [1, 2, 3, 4, 5]
}
},
components: {
PullToRefresh
}
}
<pull-to-refresh
:style="{ height: '250px', overflow: 'auto', border: '1px solid #ccc' }"
className="forTest"
:refreshing="false"
:indicator="{deactivate: 'pull down'}"
>
<div v-for="item in list" :style="{ textAlign: 'center', padding: '20px' }" :key="item">{{ item }}</div>
</pull-to-refresh>
API
Props
name | description | type | default |
---|---|---|---|
direction | pull direction, can be up or down |
String | down |
distanceToRefresh | distance to pull to refresh | number | 50 |
refreshing | Whether the view should be indicating an active refresh | bool | false |
onRefresh | Called when the view starts refreshing. | () => void | - |
indicator | indicator config | Object | { activate: 'release', deactivate: 'pull', release: 'loading', finish: 'finish' } |
className | additional css class of root dom node | String | - |
prefixCls | prefix class | String | 'v-pull-to-refresh' |
Dependencies
Dependencies
autoprefixer: ^7.1.2babel-core: ^6.22.1babel-helper-vue-jsx-merge-props: ^2.0.3babel-loader: ^7.1.1babel-plugin-syntax-jsx: ^6.18.0babel-plugin-transform-runtime: ^6.22.0babel-plugin-transform-vue-jsx: ^3.5.0babel-preset-env: ^1.3.2babel-preset-stage-2: ^6.22.0chalk: ^2.0.1copy-webpack-plugin: ^4.0.1css-loader: ^0.28.0extract-text-webpack-plugin: ^3.0.0file-loader: ^1.1.4friendly-errors-webpack-plugin: ^1.6.1html-webpack-plugin: ^2.30.1node-notifier: ^5.1.2optimize-css-assets-webpack-plugin: ^3.2.0ora: ^1.2.0portfinder: ^1.0.13postcss-import: ^11.0.0postcss-loader: ^2.0.8postcss-url: ^7.2.1rimraf: ^2.6.0semver: ^5.3.0shelljs: ^0.7.6uglifyjs-webpack-plugin: ^1.1.1url-loader: ^0.5.8vue-loader: ^13.3.0vue-style-loader: ^3.0.1vue-template-compiler: ^2.5.2webpack: ^3.6.0webpack-bundle-analyzer: ^2.9.0webpack-dev-server: ^2.9.1webpack-merge: ^4.1.0