引言:

上拉載入更多在移動端不論是在 app 裡面還是在頁面中都是必不可少的，以下是 mint-ui 中上拉載入更多的總結。

檢視官網

(1)安裝:npm i mint-ui --save(2)在 vue 中 main.js 引入

import MintUi from 'mint-uiimport 'mint-ui/lib/style.css

全域性使用: Vue.use(MintUi)

(1)上拉載入是根據 page 的不斷自增長，在調介面的時候獲取新的資料的，如果加載出來的資料小於每頁顯示的資料，那麼說明載入結束。需要透過 vue 資料雙向繫結隱藏載入中字樣(2)如果載入完資料，還需要顯示沒有更多資料的提示(3)使用 mint-ui 之

  <ul      v-infinite-scroll="getmovielist"      infinite-scroll-disabled="loading"      infinite-scroll-distance="40"    >  </ul>

其中：getmovielist 是一個方法，用於呼叫介面處理資料，預設會自動呼叫一次初始化展示;loading 是個開關，用於在載入資料過程中防止使用者不斷觸發上來觸底再次載入;40 表示距離底部小於 40 畫素的位置再次觸發資料載入。

<template>  <div class="movie_body">    <ul      v-infinite-scroll="getmovielist"      infinite-scroll-disabled="loading"      infinite-scroll-distance="40"    >      <li v-for="item in movielist" :key="item._id">				<div class="pic_show"><img :src="item.imgurl"></div>        <div class="info_list">          <h2>{{item.title}}</h2>          <p>觀眾評 <span class="grade">{{item.ratings}}</span></p>          <p>主演: {{item.stars}}</p>          <p>{{item.description}}</p>        </div>        <div class="btn_mall">          購票        </div>      </li>    </ul>    <div class="commondiv loading" v-show="showloading">loading....</div>    <div class="commondiv" v-show="showmore">沒有更多資料了...</div>  </div></template>### 5 js程式碼如下export default {  data() {    return {      movielist: [],      base_url:'http://localhost:8888/',   //定義一個根目錄，因為要訪問圖片需要根目錄      loading: false,      page: 1,  //page預設是1      pagesize: 5, //每次分頁的條數      showloading: false,  //控制載入loading      showmore: false,  // 控制有沒有更多資料    };  },  computed: {},  watch: {},  methods: {    getmovielist(){ // 預設執行一次      this.loading = true    // 開關，資料沒有出來之前不能連續請求同一引數的介面      this.showloading = true      var start = (this.page-1) * this.pagesize  // strat表示跳過幾條      var end = this.pagesize                //查幾條資料      this.$http.get(`/movies?start=${start}&end=${end}`).then(res => {        // console.log(res)        this.showloading = false        // 把所有的圖片        var list =  res.list  //賦值一個變數        list.forEach((item)=>{          item.imgurl = this.base_url+item.imgurl          //同意處理圖片字首        })        // 如果賦值操作的話，那麼每次上拉後請求過來的新資料會把前面的全部覆蓋掉        this.movielist = this.movielist.concat(list)        //每次的資料都要新增進來而不是把之前的資料覆蓋掉        if(list.length < this.pagesize){          //說明資料已經載入完畢          this.loading = true          //loading為false的話可以呼叫，為true的時候上拉的時候就停止請求了          this.showmore = true        } else {   // 說明還有資料          this.page = this.page+1   //這個時候page需要加1          console.log(this.page)          this.loading = false          // 如果資料還有這個時候把loading放開        }      })    }  }}

ps: axios 封裝需要引入 axios

並在 main.js 中 Vue.prototype.$http = axios 掛載一下，本片作者使用了環境變數進行跨域代理配置，你也可以根據自己的呼叫介面進行相應處理.