alternatively pull down or pull up or both for Vue2.+
A Vue.js project with vue-cli3
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run serve
# build for production with minification
npm run build <pull-to-refresh
@on-pullup='onPullup'
@on-pulldown='onPulldown'>
<ul>
<li :key="index" v-for="(item, index) in items">
# item {{ index }}
</li>
</ul>
</pull-to-refresh>import PullToRefresh from './components/pull-to-refresh'
onPullup(finshCallback) {
setTimeout(()=>{
this.items=this.items.concat([6,6,6,6,6,6,6,6,6,6,6])
finshCallback();//finish the refreshing state
},3000);
}| Name | Type | Default | Description |
|---|---|---|---|
| disable-pullup | Boolean |
false |
set true to disable pullup function |
| disable-pulldown | Boolean |
false |
set true to disable pulldown function |
| on-pullup | Function |
undefined |
the pullup listener with a finshCallback param to tell it to finsh refreshing state |
| on-pulldown | Function |
undefined |
the pulldown listener with a finshCallback param to tell it to finsh refreshing state |
| ==================== | ========= | ============ | =================== |
for convenience & efficiency ,i donot set the tips and timeout editable, if u want to edit ,just edit as u like:
const PULL_DOWN_NORMAL='下拉刷新'
const PULL_DOWN_RELEASE='释放加载'
const PULL_DOWN_LOADING='加载中，请稍后'
const PULL_UP_NORMAL='上拉刷新'
const PULL_UP_RELEASE='释放加载'
const PULL_UP_LOADING='加载中，请稍后'
timeout=30000//the 30s timeout of reseting refreshing state if u donnot call the finshCallback