vue mint LoadMore 组件使用

最新推荐文章于 2024-11-01 14:48:20 发布

阿豪boy

最新推荐文章于 2024-11-01 14:48:20 发布

阅读量72

点赞数

文章标签： vue java react python javascript

本文链接：https://blog.csdn.net/qq_35516360/article/details/122066706

版权

原文链接: vue mint LoadMore 组件使用

上一篇: vue-cli 中 webpack 加载静态文件

下一篇: vue mint tabbar 组件使用

地址

http://mint-ui.github.io/docs/#/en2/loadmore

实现在顶部下拉刷新，在底部上拉加载

autofill 属性是自动加载数据，根据情况可以选择是自己加载还是组件自动加载，会调用的是loadBottom

top-method 是下拉刷新的函数

bottom-method 是上拉加载函数

bottom-all-loaded 表示是否全部加载完毕，由于父组件不应该通过ref来修改子组件的属性值，所以需要在父组件中定义一个属性，通过绑定的方式修改子组件属性值，当该值为true，则上拉加载无法使用

注意在函数中改变数据后，还需要告诉组件执行成功了

  this.$refs.loadmore.onBottomLoaded();

<template>

  <mt-loadmore :autoFill="false"
               :top-method="loadTop"
               :bottom-method="loadBottom"
               :bottom-all-loaded="allLoaded"
               ref="loadmore"
  >
    <review-info class="review-info" v-for="i in reviews" :key="i.id" :review="i"></review-info>
  </mt-loadmore>

</template>

<script>
  import * as app from '../api/app.api'
  import ReviewInfo from '../components/ReviewInfo2'

  export default {
    name: "scroll-mint",
    data() {
      return {
        allLoaded: false,
        reviews: [],
      }
    },
    components: {
      ReviewInfo
    },
    methods: {
      async loadTop() {
        this.reviews = await app.get_hot_review()
        this.$refs.loadmore.onTopLoaded();

      },
      async loadBottom() {
        this.reviews = this.reviews.concat(await app.get_hot_review())
        this.$refs.loadmore.onBottomLoaded();
        this.allLoaded = true
      }
    },

    async mounted() {
      this.reviews = await app.get_hot_review()
    }

  }
</script>

<style scoped>
  .review-info {
    margin: 10px 0;
  }
</style>