refreshable

a pull to refresh component for vue

2
0
Vue

Refreshable

npm
npm
vue2

a pull to refresh component for vue

refreshable.gif

Installation

npm i refreshable
  1. globally
import Refreshable from 'refreshable'
import 'refreshable/dist/assets/refreshable.css'

Vue.use(Refreshable)
  1. partially
import { Refreshable } from 'refreshable'
import 'refreshable/dist/assets/refreshable.css'

<script>
components: {
  Refreshable
}
</script>

Usage

  1. turn on pulldown or pullup simply
<refreshable ref="rf" :pulldown="true" :pullup="true" @pullingUp="doPullup" @pullingDown="doPulldown">
  // your html
</refreshable>
  1. custom-built for your own
 <refreshable ref="rf" :pulldown="{
            threshold: 50,
            text: {
              loading: 'loading for u',
              normal: 'pull to refresh',
              done: 'done'
            },
            img: 'random' // spinner/circular/dots/random(default)
          }" :pullup="{
            threshold: 10,
            text: { loading: 'loading', done: 'done', normal: 'pull up and load more', noMore: 'all loaded' },
            img: 'circular' // spinner/circular/dots/random(default)
          }" @pullingUp="doPullup" @pullingDown="doPulldown">
  // your html      
</refreshable>
  1. closure funcs
  • 3.1 endpoint
this.$refs.refreshable.endPullDown() // for pull down event
this.$refs.refreshable.endPullUp(hasMore: Boolean) // for pull up event
  • 3.2 layout recalculate
this.$refs.refreshable.setNeedsLayout()
  • 3.3 auto refresh
this.$refs.refreshable.autoRefresh()
  • 3.4 resume pullUp
this.$refs.refreshable.resumePullUp()

Notice

your fixed component or dom element will not effects when wrapped in <refreshable> cause of the dependency of the lib is base on transform. therefore, your should place all fixed elements out of the wrapper.