关于Mint UI的loadmore组件上拉为啥不加载

<template>
  <div class="main">
    <mt-loadmore 
    :top-method="loadTop" 
    :bottom-method="loadBottom"  
    :bottom-all-loaded="allLoaded" 
    ref="loadmore"
    :topPullText='infor.pullTop'
    :topDropText='infor.dropTop'
    :topLoadingText='infor.loadingTop'
    :bottomPullText='infor.pullBottom'
    :bottomDropText='infor.dropBottom'
    :bottomLoadingText='infor.loadingBottom'
    >
        <ul>
          <li v-for="item in list">{{ item }}</li>
        </ul>
        <!-- <div slot="top" class="mint-loadmore-top">
            <span v-show="topStatus === 'pull'">下拉刷新</span>
            <span v-show="topStatus === 'loading'">Loading...</span>
            <span v-show="topStatus === 'drop'">加载完成</span>
          </div> -->
      </mt-loadmore>
  </div>
      <!-- <div>
          <input type="button" value='点击' @click='add'>
      </div> -->
</template>

<script>
  import { Indicator } from 'mint-ui';
// import { InfiniteScroll } from 'mint-ui';
// // Vue.use(InfiniteScroll);
// import { Toast } from 'mint-ui';
export default {
  components: {
    // mtLoadmore:InfiniteScroll
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      list:[1,2,3,4,5,6],
      allLoaded:false,
      topStatus:'pull',
      infor:{
        pullTop:'下拉刷新',
        loadingTop:'正在刷新',
        dropTop:'刷新完毕',
        pullDown:'上拉加载',
        loadingDown:'正在加载',
        dropDown:'加载完毕',
      }
    }
  },
  methods:{
    add(){
      Indicator.open({
              text: '加载中...',
              spinnerType: 'triple-bounce'
             });
    },
    loadTop(){
      this.topStatus='loading'
      setTimeout(()=>{
        this.topStatus='drop'
        this.$refs.loadmore.onTopLoaded();
       setTimeout(()=>{
        this.topStatus='pull'
       },500)
      },2000)
    },
    loadBottom(){
      this.list.push(1)
      if(this.list.length>=15){ this.allLoaded = true;}// 若数据已全部获取完毕
      this.$refs.loadmore.onTopLoaded();
    
    }
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main{
  overflow: auto;
  height: 660px
}
li{
  width: 100%;
  height: 80px;
  background: red
}
</style>

为啥上拉不加载 搞不懂 还有如何引入到局部 我目前是引得全局组件

阅读 2.3k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进