mint-ui loadmore上拉刷新 下拉加载

利用Vue和mint-ui单页面开发时，遇到“上拉加载，下拉刷新”的功能，使用的mint-ui组件为loadmore组件，遇到了下拉不能加载的的问题，分享解决办法，有待改善，往大神们提意见·······

HTML 代码如下：

<div class="re_content">
  <mt-loadmore :top-method="loadTop" @top-status-change="handleTopChange" :bottom-method="loadBottom" @bottom-status-change="handleBottomChange" ref="loadmore">
    <div>
      你要循环显示的内容
    </div>
  </mt-loadmore>
</div>

同时，注意容器css的设置，这个很重要！！！！还有对于容器的高度可以设置固定值，也可以让根据内容的大小来变化。

overflow: scroll;

接下来就是methods的处理了：（这里还有上拉，下拉的距离为多长会触发方法，可以去mint-ui官网查看api，进行设置）

data(){
    return {
      // 可以进行上拉
      allLoaded: false,
      bottomStatus: '',
      topStatus: ''
}
},   
methods:{
     // 下拉状态改变时，
    handleBottomChange (status) {
      this.bottomStatus = status
    },
    // 上拉状态改变时
    handleTopChange (status) {
      this.topStatus = status
      console.log('this.topStatus==' + this.topStatus)
    },
    // 下拉刷新，触发的方法
    loadTop () {
      // 重新加载，getData方法自己定义，用于获取数据
      this.getData()
      this.$refs.loadmore.onTopLoaded()
    },
    // 上拉加载，触发的方法
    loadBottom () {
        // 如果数据为加载完
      if (!this.allLoaded) {
            //如果数据加载完，修改allLoaded状态
          if (value.data.data.content.length < 4) {
            this.allLoaded = true // 若数据已全部获取完毕
          }
      } else {
        this.$refs.loadmore.onBottomLoaded()
        this.$toast({
          message: '没有更多啦~',
          position: 'bottom',
          duration: 3000
        })
      }
    }
}

我在这里在判断是否可以继续上拉加载的方法是，判断接口返回的数据长度是否小于每次请求的长度，如果小于每次请求的长度，则说明，数据已经全部加载，反之，没有加载完全，并给用户提示。

但是，感觉这种方法比较笨拙，还望各路大神提提意见~~~