vue.js,refresh,load more,Vue2.
alternatively pull down or pull up or both for Vue2.+
demoA Vue.js project with vue-cli3
live-demo
Build Setup DEMO# 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); } Api Properties
| 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
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
