vue使用mint-ui實現下拉刷新和無限滾動

在開發web-app中，總會遇到v-for出來的li會有不少，當數據達幾百上千條的時候，一塊兒加載出來會形成用戶體驗不好的效果。
這時候咱們可使用無限滾動和下拉刷新來實現控制顯示的數量，當刷新到底部的邊界的時候會觸發無限滾動的事件，再次加載必定數量的條目。

仍是拿在項目中的功能來舉栗子介紹。

有個列表，幾千條數據，作分頁查詢，限制每次顯示查詢20條，每次拉到最後20條邊緣的時候，觸發無限滾動，這時候會出現加載圖標，繼續加載後續20條數據，加載到最後的時候會提示數據「加載完畢」。

項目的ui使用的mint-ui，因此使用的無限滾動也是mint-ui裏面的，詳細參考官方文檔

接下來給你們介紹代碼實現：
一、爲元素添加 v-infinite-scroll 指令便可使用無限滾動。滾動該元素，當其底部與被滾動元素底部的距離小於給定的閾值（經過 infinite-scroll-distance 設置）時，綁定到 v-infinite-scroll 指令的方法就會被觸發。

<!--ul裏面幾個scoller就是無限滾動的幾個api-->
<ul class="mui-table-view" v-infinite-scroll="loadMore" infinite-scroll-disabled="moreLoading" infinite-scroll-distance="0" infinite-scroll-immediate-check="false">
  <!--li數據遍歷循環部分-->
  <li class="mui-table-view-cell" v-for="item in list">
    <a class="mui-navigate-right">
      <span class="mui-pull-left">{{item.name}}</span>
      <span class="mui-pull-right">{{item.date.substring(0,10)}}</span>
    </a>
  </li>
  <!--底部判斷是加載圖標仍是提示「所有加載」-->
  <li class="more_loading" v-show="!queryLoading">
    <mt-spinner type="snake" color="#00ccff" :size="20" v-show="moreLoading&&!allLoaded"></mt-spinner>
    <span v-show="allLoaded">已所有加載</span>
  </li>
</ul>

二、script部分

<script>
  export default {
    data() {
      return {
        //初始化無限加載相關參數
        queryLoading: false,
        moreLoading: false,
        allLoaded: false,
        totalNum: 0,
        pageSize: 20,
        pageNum: 1,
      }
    },
    computed: {
      params() {
        return{
          //這裏先定義要傳遞給後臺的數據
          //而後將每次請求20條的參數一塊兒提交給後臺
          pageSize: this.pageSize
          }
      }
    },
    methods: {
      //無限加載函數
      loadMore() {
        if(this.allLoaded){
          this.moreLoading = true;
          return;
        }
        if(this.queryLoading){
          return;
        }
        this.moreLoading = !this.queryLoading;
        this.pageNum++;
        this.$http.post("請求後臺數據的接口",Object.assign({pageNum:this.pageNum},this.params)).then((res) => {
          if(res.sData && res.sData.list){
            this.list = this.list.concat(res.sData.list);
            this.allLoaded = this.debtList.length==this.totalNum;
          }
          this.moreLoading = this.allLoaded;
        });
      }
    },
  }
</script>

到這裏就能夠實現無限滾動了，這裏結合了mint-ui的Infinite scroll和Spinner

謝謝你們的閱讀，如果以爲有用，請不要吝嗇，賞賜小的一個贊！！