vue-scroller的使用 實現下拉刷新 上拉加載初始效果

安裝vue-scroller

npm i vue-scroller -D

在main.js中：

import VueScroller from 'vue-scroller'

Vue.use(VueScroller)

 

主要是兩個方法：:on-refresh="refresh"下拉刷新回調   :on-infinite="infinite"上拉加載回調

<scroller 

  :on-refresh="refresh"

  :on-infinite="infinite">

  <!-- content goes here     這里寫需要下拉刷新，上拉加載的元素，最好是單個元素，多個元素拉動時會出現小bug-->

</scroller>

 

如：

<template>

　　<div id="main">

　　　　<div class="header">xxxx</div>

　　　　<div class="scrollerBox">

　　　　　　<scroller class="scroller" :on-infinite="infinite"//上拉加載的回調函數

　　　　　　　　　　　　　　　　　:on-refresh="refresh"//下拉刷新的回調函數

　　　　　　　　　　　　　　　　　:noDataText="'上拉加載更多數據''//上拉加載結束時，顯示的文字

　　　　　　　　　　　　　　　　　refresh-layer-color="red"//下拉刷新的文字顏色

　　　　　　　　　　　　　　　　　loading-layer-color="red"//上拉加載的文字顏色

　　　　　　　　　　　　　　　　　ref="myscroller">

　　　　　　　　<div class="content">xxx</div>

　　　　　　</scroller>

　　　　</div>

　　　　<div class="footer">底部</div>

　　</div>

</template>

scroller外部最好用一個元素包裹，將頭部和底部位置留出來，scroller里面的元素不要訂高，height:100%;不會生效，只有固定px高度才會生效，不過這個元素里面需要上拉加載新東西，所以不要訂高

methods中寫入infinite   和  refresh兩個方法

 

infinite() {//上拉加載

　　let self = this;

　　let start = this.moveList.length;

　　setTimeout(() => {

　　　　for(let i = 0; i < 2; i++) {

　　　　　　if(start>=11){

　　　　　　　　self.$refs.myscroller.noDataText="沒有更多數據了"//更改上拉加載的文字

　　　　　　　　self.$refs.myscroller.finishInfinite(true);

　　　　　　　　return

　　　　　　}

　　　　　　self.moveList.push(i)//這是在data里的一個數組

　　　　}

　　}, 1500)

　　setTimeout(()=>{

　　　　this.$refs.myscroller.finishInfinite(true);//停止上拉加載的動效，出現沒有“"沒有更多數據了”的提示，當傳里面的布爾值代表isNoMoreData :Boolean，是否沒有更多數據，true：沒有更多數據，false：還有數據，至於有什么區別，傳一下對比一下就行了

　　},1000)

},

 

refresh() {//下拉刷新

　　var self=this;

　　console.log('refresh');

　　setTimeout(function(){

　　　　self.$refs.myscroller.finishPullToRefresh();//停止下拉刷新動效

　　},1500)

}

 

上面是一個簡單的demo

下面奉上官方api網址：

https://www.npmjs.com/package/vue-scroller