上拉加载 和 下拉加载

<template>
  <div>
    <!-- <div @click="open()">121</div> -->
    <Confirm ref="confirm" @on-confirm="test()" :content="`好嗨哟`"></Confirm>
    <section style="height: 100%; overflow-y:scroll">
      <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
        <div>
          <div v-for="(item,index) in 100" :key="index">{{index}}</div>
        </div>
      </mt-loadmore>
    </section>
  </div>
</template>
<script>
export default {
  data () {
    return {
      allLoaded: false
    }
  },
  methods: {
    open () {
      this.$refs.confirm.open()
    },
    loadTop () {
      this.open()
      // 加载更多数据
      this.$refs.loadmore.onTopLoaded()
    },
    loadBottom () {
      //注意这个事件 你页面没有布局好的话，是不触发的，算是小坑吧！
      this.open()
      // 加载更多数据
      // this.allLoaded = true// 若数据已全部获取完毕
      this.allLoaded = false// 若数据已全部获取完毕
      this.$refs.loadmore.onBottomLoaded()
    }
  }
}
</script>

image.png