VUE mint-ui mt-loadmore 上拉加载

<template>
    <div>
       <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" @bottom-status-change="handleBottomChange" :auto-fill="autoFill">

        <div v-for="history in historylist" >
           <div>{{history}}</div>
           <div slot="bottom" class="mint-loadmore-bottom">
                    <span v-show="bottomStatus === 'pull'">{{bottomPullText}}</span>
                    <span v-show="bottomStatus === 'drop'">{{bottomDropText}}</span>
                    <span v-show="bottomStatus === 'loading'">
                        <mt-spinner type="snake"></mt-spinner>
                    </span>
           </div>

     </mt-loadmore>
    </div>
</template>

<style>
.mint-loadmore-bottom span {
    display: inline-block;
    -webkit-transition: .2s linear;
    transition: .2s linear;
    vertical-align: middle }

.mint-loadmore-bottom span.is-rotate {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg) }
</style>

<script>
import { Loadmore } from 'mint-ui'

export default {

    data() {
        return {
            historylist : [],
            allLoaded: false,
            autoFill: false,//若为真，loadmore 会自动检测并撑满其容器
            currentpageNum: 1,//当前页数
            limit: 20,//每页条数
            totalNum: null,//总数
            bottomStatus: '',
            bottomPullText: '上拉加载更多...',
            bottomDropText: '释放更新...'
        }
    },
    methods:{
        loadBottom() {
            setTimeout(() => {

                if (this.totalNum - this.currentpageNum * this.limit > 0) {
                    //alert(this.totalNum - this.currentpageNum * this.limit)
                    this.currentpageNum++;
                    this.$http.get('/rest/historylist/' 
                    + this.currentpageNum + "/" + this.limit +  '/historylist'  
                    , { emulateJSON: true }).then((data) => {

                        if (data.data.rows.length > 0) {
                            for (var i = 0; i < data.data.rows.length; i++) {
                                this.historylist.push(data.data.rows[i]);
                            }

                        }

                    })
                } else {
                    this.allLoaded = true;

                }
                this.$refs.loadmore.onBottomLoaded();

            }, 1500);



        },
        handleBottomChange(status) {
            this.bottomStatus = status;
            //console.log(this.bottomStatus)
        },
    },
    created() {
       this.$http.get('/rest/historylist/' 
       + this.currentpageNum + "/" + this.limit + '/historylist'
       , { emulateJSON: true }).then((data) => {
               this.totalNum = data.data.total;
               this.historylist = data.data.rows;    
       })
    }
}
</script>

autoFill 最好设置为false，否则一开始会自动加载一遍 loadBottom .本例实现的效果为每次上拉加载 limit 条数，通过 currentpageNum 把当前页数传到后台获取数据，通过判断 bottomStatus 来改变提示的文字。第一次写博客，如有不对之处，欢迎指出，大家一起交流。

附上mint-ui文档 Loadmore