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