vue-cli 结合mint-ui 的loadmore组件使用（

mint-ui 的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">   -->
    <v-loadmore  :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">  
      <ul class="list" >  
        <li v-for="(item,index) in pageList" :key="index">  
          <div>{{item.name}}:{{item.age}}</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() {                                //组件提供的下拉触发方法   
        this.loadPageList();                     //下拉加载    
        this.$refs.loadmore.onTopLoaded();       // 固定方法，查询完要调用一次，用于重新定位  
      },  
      loadBottom() {  
                                                 // 上拉加载
        this.more();                             // 上拉触发的分页查询  
        this.$refs.loadmore.onBottomLoaded();    // 固定方法，查询完要调用一次，用于重新定位  
      },  
      loadPageList(){  
                                                 // 查询数据  
        this.$http.get('https://api.myjson.com/bins/17nnh6').then(res =>{ 
                                                 // 是否还有下一页，加个方法判断，没有下一页要禁止上拉  
           this.isHaveMore(1);  
           this.pageList =[...this.pageList,...res.data] ;//
          console.log(res.data);  
          this.$nextTick(function () {  
            this.scrollMode = "touch";           // 原因是DOM更新循环结束时调用延迟回调函数，大意就是DOM元素在因为某些原因要进行修改就在这里写，要在修改某些数据后才能写，  
                                                 // 这里之所以加是因为有个坑，iphone在使用-webkit-overflow-scrolling属性，就是移动端弹性滚动效果时会屏蔽loadmore的上拉加载效果，  
                                                 // 花了好久才解决这个问题，就是用这个函数，意思就是先设置属性为auto，正常滑动，加载完数据后改成弹性滑动，安卓没有这个问题，移动端弹性滑动体验会更好    
          });  
        });  
      },  
      more(){     
        this.loadPageList();                      // 分页查询  
      },  
      isHaveMore(isHaveMore){                     // 是否还有下一页，如果没有就禁止上拉刷新                            
        this.allLoaded = true;                    //true是禁止上拉加载  
        if(isHaveMore){  
          this.allLoaded = false;  
        }  
      }  
    }  
  }  
</script>