HTML程式碼如下：

<div  v-infinite-scroll="loadBottom" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
    <mt-loadmore  :auto-fill="false" :top-method="loadTop"  :bottom-all-loaded="allLoaded" ref="loadmore" >
         <ul class="content-list" >
         ...
       	 </ul>            
    </mt-loadmore>
</div>
 

JS程式碼如下：

// 下拉重新整理上拉載入
loadTop() {
    console.log('loadTop');
    this.pageNum=1;
    this.getMsgList(true,false);
    // this.getLayoutData();
}
loadBottom() {
    console.log('loadBottom');
    this.pageNum++;
    if(this.allLoaded === false){//allLoad用來避免每一次下劃到底部的時候一直出現toast提示
        this.getMsgList(false, true);
    }
}
getMsgList(flag,flag2){
    utils.ajax({
        // url: "/sfs/api/v1/post",
        url: this.url,
        data:{pageNum:this.pageNum,pageSize:this.pageSize,postSortEnum:order?order:'CREATE_TIME'},
        success: function (result) {
           if(flag){//初始化的時候flag為true，代表一定有資料可以顯示
               this.msgAllData=result.body;
               this.$refs.loadmore.onTopLoaded();
               this.allLoaded = false;
               this.showLoading = true;
           }
           if(flag2){//上劃獲取更多值的時候可能會出現資料已經獲取完畢的情況
               if(result.body.length===0){
                    console.log('loadover');
                    this.allLoaded = true;// 若資料已全部獲取完畢
                    this.$refs.loadmore.onBottomLoaded();
                    this.$toast({
                        message: '沒有更多了',
                        position: 'middle',
                        duration: 2000
                    });
                    this.showLoading = false;
                }
                // this.$refs.loadmore.onBottomLoaded();
                this.msgAllData=this.msgAllData.concat(result.body);
            };
            this.msgAllData.forEach(function(item){
                item.currentComment = "";
            }.bind(this))
        }.bind(this)
    });
}