address

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

Implement pull-down refresh at the top and pull-up load at the bottom

autofill property is to automatically load data. You can choose whether to load by yourself or automatically load components according to the situation. Loadbotom will be called

Top method is a function of pull-down refresh

Bottom method is a pull-up loading function

Bottom all loaded indicates whether all are loaded. Since the parent component should not modify the attribute value of the child component through ref, it is necessary to define an attribute in the parent component and modify the attribute value of the child component through binding. When the value is true, pull-up loading cannot be used

Note that after changing the data in the function, you also need to tell the component that the execution is successful

  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>