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

发布于 2022-09-06 19:29:31 字数 2425 浏览 18 评论 0

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

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文