關鍵：上拉載入方法方法，都會有一個回撥函式 done,回撥函式的傳引數很關鍵，

done(true) 停止載入，會顯示“已無更多資料”

done(false) 允許下次繼續

看截圖：

1.先安裝：npm install vue-scroller

2.main.js 引入：

import VueScroller from 'vue-scroller'
Vue.use(VueScroller)

3.原始碼：

<template>
  <div class="container">
    <nav-header>微官網</nav-header>
    <div class="tabs">
      <div class="tabs-item">校園介紹</div>
      <div class="tabs-item">最近新聞</div>
      <div class="tabs-item">校園特色</div>
    </div>
    <scroller style="padding-top:4.28rem;"
                :on-refresh="pullDownFn"
                :on-infinite="pullUpFn"
                ref="my_scroller" >
       <div class="">
          <offical-introduce v-if="selectTabs === 0" ref="officalChildDom"></offical-introduce>
          <offical-news v-else-if="selectTabs === 1" ref="officalChildDom"></offical-news>
          <offical-special v-else="selectTabs === 2" ref="officalChildDom"></offical-special>
        </div>
        <div style="width:100%;height:6rem;">&nbsp;</div> <!-- 自定義空白高度，避免被tab遮擋 -->
      </scroller>
      <tab></tab>
  </div>
</template>

<script>
import navHeader from '../components/navHeader'
import officalIntroduce from '@/views/offical-introduce'
import officalNews from '@/views/offical-news'
import officalSpecial from '@/views/offical-special'
import tab from '../components/tab'

export default {
    // ......
    methods:{
        pullDownFn(done){ // 下拉重新整理
            done()
        },
        pullUpFn(done){// 上拉載入更多
            if(isLoadOver){ // 已沒有更多資料
                done(true)    
            }else{
                done()
            }
        }, 
    }
    // ......
    
}

</script>