vue和mintui-Loadmore結合實現下拉刷新，上拉載入 （待優化）

mintui是餓了麽團隊針對vue開發的移動端組件庫，方便實現移動端的一些功能，這裡只用了Loadmore功能實現移動端的上拉分頁刷新，下拉載入數據.
mintui官網：http://mint-ui.github.io/#!/zh-cn

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

PS：有個坑一定要註意就是註釋里說的iPhone里loadmore和-webkit-overflow-scrolling屬性衝突無法上拉問題

可參考另外一個插件，沒有使用過，《簡單靈活且強大的Vue下拉刷新組件：vue-pull-to》