<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 來改變提示的文字。第一次寫部落格，如有不對之處，歡迎指出，大家一起交流。