Vue-scroll-refresh-loadmore NPM

vue-scroll-refresh-loadmore

scroll for refresh an load more

npm.io

START UP

INSTALL

npm install vue-scroll-refresh-loadmore --save

BASIC USE

<scroller
      @on-refresh="refresh"
      @on-loadmore="loadmore"
      ref="chatScroller">
   <item /> 
   <item />  
   <item />       
</scroller>

methods

methods: {
      refresh () {
        console.log('refresh')
        window.setTimeout(() => {
          this.$refs.chatScroller.refreshDone()
        }, 3000)
      },
      loadmore () {
        console.log('load more')
        window.setTimeout(() => {
          this.$refs.chatScroller.loadmoreDone()
        }, 3000)
      }
    },

props

props	type	required	description	default
pulldownText	String	N	text show when pulling done	Pull down to refresh
onPulldownText				Release to refresh
pulldownRefreshingText				loading...
scrollRefreshingText			footer loading more text	loading...
headerMaxHeight	Number		in px	50
footerMaxHeight			in px	30
refreshThreshold	Number		0.5 means when pulldown distance >= 0.5 * headerMaxHeight ,that is enough for release refreshing	0.5
loadMoreThreshold	Number		the distance (px) from bottom for loading more	10
headerRefreshDisabled	Boolean		when set true, `on-refresh` will not emit	false
footerLoadDisabled	Boolean		when set true, `on-loadmore` will not emit	false

events

on-refresh: emit when pulldown a enough distance will not emit when refreshing, or headerRefreshDisabled === true ,must call the method refreshDone to reset
on-loadmore: emit when pullup to the bottom(or the loadMoreThreshold set) will not emit when refreshing, or footerLoadDisabled === true ,must call the method footerLoadDisabled to reset

methods

refreshDone: hide header loading reset header refreshing statu * scrollTop = 0
loadmoreDone: * reset footer loading

vue scroll refresh infinite load refresh

@infinitebrahmanuniverse/nolb-vue-sc @everything-registry/sub-chunk-3091

1.0.1

7 years ago

1.0.0

7 years ago