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看詳情