安裝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