vue和mintui-Loadmore結合實現下拉刷新，上拉加載

mintui是餓了麼團隊針對vue開發的移動端組件庫，方便實現移動端的一些功能，這裏只用了Loadmore功能實現移動端的上拉分頁刷新，下拉加載數據，廢話不說上代碼。

<template>
  <div class="main-body" :style="{'-webkit-overflow-scrolling': scrollMode}">
    <v-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
      <ul class="list" v-for="(val, key) in pageList">
        <li>
          <div>我是小11</div>
          <div>我是小11</div>
        </li>
      </ul>
    </v-loadmore>
  </div>
</template>
<script>
  import {Loadmore} from 'mint-ui';
  export default {
    data:function() {
      return {
        searchCondition:{  //分頁屬性
          pageNo:"1",
          pageSize:"10"
        },
        pageList:[],
        allLoaded: false, //是否可以上拉屬性，false可以上拉，true爲禁止上拉，就是不讓往上劃加載數據了
        scrollMode:"auto" //移動端彈性滾動效果，touch爲彈性滾動，auto是非彈性滾動
      }
    },
    components: {
      'v-loadmore':Loadmore  // 爲組件起別名，vue轉換template標籤時不會區分大小寫，例如：loadMore這種標籤轉換完就會變成loadmore，容易出現一些匹配問題
                              // 推薦應用組件時用a-b形式起名
    },
    mounted(){
      this.loadPageList();  //初次訪問查詢列表
    },
    methods: {
      loadTop:function() { //組件提供的下拉觸發方法
        //下拉加載
        this.loadPageList();
        this.$refs.loadmore.onTopLoaded();// 固定方法，查詢完要調用一次，用於重新定位
      },
      loadBottom:function() {
        // 上拉加載
        this.more();// 上拉觸發的分頁查詢
        this.$refs.loadmore.onBottomLoaded();// 固定方法，查詢完要調用一次，用於重新定位
      },
      loadPageList:function (){
          // 查詢數據
        this.api.PageList(this.searchCondition).then(data =>{
          // 是否還有下一頁，加個方法判斷，沒有下一頁要禁止上拉
          this.isHaveMore(data.result.haveMore);
          this.pageList = data.result.pageList;
          this.$nextTick(function () {
            // 原意是DOM更新循環結束時調用延遲迴調函數，大意就是DOM元素在因爲某些原因要進行修改就在這裏寫，要在修改某些數據後才能寫，
            // 這裏之所以加是因爲有個坑，iphone在使用-webkit-overflow-scrolling屬性，就是移動端彈性滾動效果時會屏蔽loadmore的上拉加載效果，
            // 花了好久才解決這個問題，就是用這個函數，意思就是先設置屬性爲auto，正常滑動，加載完數據後改成彈性滑動，安卓沒有這個問題，移動端彈性滑動體驗會更好
            this.scrollMode = "touch";
          });
        });
      },
      more:function (){
          // 分頁查詢
        this.searchCondition.pageNo = parseInt(this.searchCondition.pageNo) + 1;
        this.api.loadPageList(this.searchCondition).then(data=>{
          this.pageList = this.pageList.concat(data.result.pageList);
          this.isHaveMore(data.result.haveMore);
        });
      },
      isHaveMore:function(isHaveMore){
        // 是否還有下一頁，如果沒有就禁止上拉刷新
        this.allLoaded = true; //true是禁止上拉加載
        if(isHaveMore){
          this.allLoaded = false;
        }
      }
    }
  }
</script>

花了點時間整理了下代碼，複製後改改就能用了，當然你要有基本的vue開發框架，並且有點開發基礎，代碼很簡單，這個插件很好用，效果不錯，加載時的文字什麼的可以自己修改，比如增加箭頭什麼的，可以看文檔。

PS：有個坑一定要注意就是註釋裏說的iPhone裏loadmore和-webkit-overflow-scrolling屬性衝突無法上拉問題，還是vue學的不精，浪費了太多時間，引以爲戒