手写JS之怎么实现页面内下划刷新和上划展示更多

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)
    });
}