vux, vue上拉加载更多

<template>
       <mt-loadmore :distanceIndex="4" :topDistance="30" :bottomDistance=\'30\' :maxDistance="40" :bottom-method="loadBottom" :bottom-all-loaded="bottomAllLoaded" ref="loadmore" :autoFill="false" :class="{meaasgeMoreMar: userMessage.un_read_count === 0, meaasgeMore: userMessage.un_read_count > 0}">
         <div class="message_c">
           <div class="message_con" v-for="(item,index) in appendMessage" :key="index" :class="{ noRead: item.is_read == 0}" @click="messageList(item,index)">
             <div class="mes_con">
               <h3 v-text="item.title"></h3>
               <p><span v-text="item.role_name"></span>-<span v-text="item.name"></span></p>
             </div>
             <div class="mes_p" @click="messageStop">
               <div class="messageText" v-html="item.message"></div>
             </div>
           </div>
         </div>
         <div slot="bottom" class="mint-loadmore-bottom">
           <load-more tip="正在加载" v-show="loadingBottomShow"></load-more>
         </div>
       </mt-loadmore>
</template>
<script>
  import { LoadMore, TransferDom } from \'vux\'
  import { Loadmore } from \'mint-ui\'
  import Vue from \'vue\'
  Vue.component(Loadmore.name, Loadmore)
  export default {
    name: \'UserMessage\',
    components: {
      LoadMore
    },
    data () {
      return {
        userMessage: [],
        appendMessage: [],
        show: false,
        page: 1,
        bottomAllLoaded: false,
        meaasgeImg: false,
      }
    },
    directives: {
      TransferDom
    },
    methods: {
      verify: function () {
        let thisObj = this
        this.$chaos.setTitle(\'邮件中心\')
        this.$chaos.verify(function () {
          thisObj.uplode()
        })
      },
      uplode () {
        let thisObj = this
        thisObj.$chaos.ajax({
          data: {
            role_id: thisObj.roleId,
            page: thisObj.page
          },
          slient: true,
          userinfo: true,
          url: \'User/user_message\',
          callback: function (type, res) {
            if (type !== \'success\') {
              return
            }
            if (res.status) {
              thisObj.userMessage = res.info
              thisObj.appendMessage = thisObj.appendMessage.concat(res.info.message_list)
              if (thisObj.appendMessage.length === 0) {
                thisObj.meaasgeImg = true
              } else {
                thisObj.meaasgeImg = false
              }
              thisObj.loadingBottomShow = false
              thisObj.page++
              thisObj.$refs.loadmore.onBottomLoaded()
            } else {
              thisObj.$vux.toast.show({
                text: res.msg,
                type: \'text\',
                position: \'bottom\'
              })
            }
          }
        })
      },
      loadBottom () {
        this.uplode()
      }
    },
    created: function () {
      this.verify()
    },
    watch: {
      \'$route\': \'verify\'
    }
  }
</script>


可查看http://mint-ui.github.io/docs/#/en2/loadmore看详情