基于vue2.0版本的手机端mint-ui 的Loadmore上拉刷新下拉加载的方法，对于初学者来说很有帮助，开始写走了很多弯路，网上找到这个方法，简单实用，不多说看代码……

1. <template>  
2.   <div class="main-body" :style="{'-webkit-overflow-scrolling': scrollMode}">  
3.     <v-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">  //引用时把你循环遍历出来内容抱起来
4.       <ul class="list" v-for="(val, key) in pageList">     //pageList是你需要循环的数组
5.         <li>  
6.           <div>我是小11</div>  
7.           <div>我是小11</div>  
8.         </li>  
9.       </ul>  
10.     </v-loadmore>  
11.   </div>  
12. </template>  
13. <script>  
14.   import {Loadmore} from 'mint-ui';    //引入组件
15.   export default {  
16.     data:function() {  
17.       return {  
18.         searchCondition:{  //分页属性    
19.           pageNo:"1",  
20.           pageSize:"10"  
21.         },  
22.         pageList:[],  
23.         allLoaded: false, //是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了  
24.         scrollMode:"auto" //移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动  
25.       }  
26.     },  
27.     components: {  
28.       'v-loadmore':Loadmore  // 为组件起别名，vue转换template标签时不会区分大小写，例如：loadMore这种标签转换完就会变成loadmore，容易出现一些匹配问题  
29.                               // 推荐应用组件时用a-b形式起名  
30.     },  
31.     mounted(){  
32.       this.loadPageList();  //初次访问查询列表  
33.     },  
34.     methods: {  
35.       loadTop:function() { //组件提供的下拉触发方法  
36.         //下拉加载  
37.         this.loadPageList();  
38.         this.$refs.loadmore.onTopLoaded();// 固定方法，查询完要调用一次，用于重新定位  
39.       },  
40.       loadBottom:function() {  
41.         // 上拉加载  
42.         this.more();// 上拉触发的分页查询  
43.         this.$refs.loadmore.onBottomLoaded();// 固定方法，查询完要调用一次，用于重新定位  
44.       },  
45. //  下拉的方法
46.       loadPageList:function (){  
47.           // 查询数据  
48.         this.api.PageList(this.searchCondition).then(data =>{       //这里是写http请求，写上你的接口和参数，根据你请求的方法不同写vue一般用$axios
49.           // 是否还有下一页，加个方法判断，没有下一页要禁止上拉  
50.           this.isHaveMore(data.result.haveMore);                         //调用最下面的验证方法进行验证
51.           this.pageList = data.result.pageList;                                //获取到你需要的数据的数组
52.           this.$nextTick(function () {  
53.             // 原意是DOM更新循环结束时调用延迟回调函数，大意就是DOM元素在因为某些原因要进行修改就在这里写，要在修改某些数据后才能写，  
54.             // 这里之所以加是因为有个坑，iphone在使用-webkit-overflow-scrolling属性，就是移动端弹性滚动效果时会屏蔽loadmore的上拉加载效果，  
55.             // 花了好久才解决这个问题，就是用这个函数，意思就是先设置属性为auto，正常滑动，加载完数据后改成弹性滑动，安卓没有这个问题，移动端弹性滑动体验会更好  
56.             this.scrollMode = "touch";  
57.           });  
58.         });  
59.       },  
60. //上拉加载的方法   下面的方法一样的
61.       more:function (){  
62.           // 分页查询  
63.         this.searchCondition.pageNo = parseInt(this.searchCondition.pageNo) + 1;  
64.         this.api.loadPageList(this.searchCondition).then(data=>{  
65.           this.pageList = this.pageList.concat(data.result.pageList);  
66.           this.isHaveMore(data.result.haveMore);  
67.         });  
68.       },  
69.       isHaveMore:function(isHaveMore){  
70.         // 是否还有下一页，如果没有就禁止上拉刷新  
71.         this.allLoaded = true; //true是禁止上拉加载  
72.         if(isHaveMore){  
73.           this.allLoaded = false;  
74.         }  
75.       }  
76.     }  
77.   }  
78. </script>