pull2refresh

alternatively pull down or pull up or both for Vue2.+

A Vue.js project with vue-cli3

demo

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