mintui是餓了么團(tuán)隊(duì)針對vue開發(fā)的移動端組件庫，方便實(shí)現(xiàn)移動端的一些功能，這里只用了Loadmore功能實(shí)現(xiàn)移動端的上拉分頁刷新，下拉加載數(shù)據(jù)，廢話不說上代碼。

<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為禁止上拉，就是不讓往上劃加載數(shù)據(jù)了     scrollMode:"auto" //移動端彈性滾動效果，touch為彈性滾動，auto是非彈性滾動    }   },   components: {    'v-loadmore':Loadmore // 為組件起別名，vue轉(zhuǎn)換template標(biāo)簽時不會區(qū)分大小寫，例如：loadMore這種標(biāo)簽轉(zhuǎn)換完就會變成loadmore，容易出現(xiàn)一些匹配問題                // 推薦應(yīng)用組件時用a-b形式起名   },   mounted(){    this.loadPageList(); //初次訪問查詢列表   },   methods: {    loadTop:function() { //組件提供的下拉觸發(fā)方法     //下拉加載     this.loadPageList();     this.$refs.loadmore.onTopLoaded();// 固定方法，查詢完要調(diào)用一次，用于重新定位    },    loadBottom:function() {     // 上拉加載     this.more();// 上拉觸發(fā)的分頁查詢     this.$refs.loadmore.onBottomLoaded();// 固定方法，查詢完要調(diào)用一次，用于重新定位    },    loadPageList:function (){      // 查詢數(shù)據(jù)     this.api.PageList(this.searchCondition).then(data =>{      // 是否還有下一頁，加個方法判斷，沒有下一頁要禁止上拉      this.isHaveMore(data.result.haveMore);      this.pageList = data.result.pageList;      this.$nextTick(function () {       // 原意是DOM更新循環(huán)結(jié)束時調(diào)用延遲回調(diào)函數(shù)，大意就是DOM元素在因?yàn)槟承┰蛞M(jìn)行修改就在這里寫，要在修改某些數(shù)據(jù)后才能寫，       // 這里之所以加是因?yàn)橛袀€坑，iphone在使用-webkit-overflow-scrolling屬性，就是移動端彈性滾動效果時會屏蔽loadmore的上拉加載效果，       // 花了好久才解決這個問題，就是用這個函數(shù)，意思就是先設(shè)置屬性為auto，正常滑動，加載完數(shù)據(jù)后改成彈性滑動，安卓沒有這個問題，移動端彈性滑動體驗(yàn)會更好       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>