mint-ui上拉下拉加载更多 vue项目

时间紧急，直接上代码

<template>
 <div class="page NewsContentList">
  <div class="page-loadmore">
   <div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
    <mt-loadmore
     :top-method="loadTop"
     :bottom-method="loadBottom"
     :bottom-all-loaded="allLoaded"
     :auto-fill="false"
    ref="loadmore">
    <ul class="newsList page-loadmore-list">
     <mt-spinner :type="1" color="#26a2ff" v-if="showSpinner"></mt-spinner>
     <li v-for="(Mvalue, index) in newsContent" class="NewsCardContent listTouch" ref="newsCard">
      <div class="newsDetail">
      <div class="title">
      <div class="left" :class="Mvalue.is_read=='N'?'unread':''">
       {{Mvalue.car_plate}}
      </div>
      <div class="right">
        {{ Mvalue.createtime }}
       <!-- <img src="/images/arrowrightbb.png"> -->
      </div>
      </div>
      <div class="newsContent">
       <span>{{Mvalue.content}}</span>
      </div>
     </div>
    </li>
    <no-data v-if="newsContent.length === 0"></no-data>
   </ul>
   <div slot="bottom" class="mint-loadmore-bottom">
    <span v-show="bottomStatus !== 'loading'"
    :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span>
    <span v-show="bottomStatus === 'loading'">
     <mt-spinner type="snake"></mt-spinner>
    </span>
   </div>
    </mt-loadmore>
   </div>
  </div>
 </div>
</template>

<script>
    import {getnews} from "../../service/getData";
    export default {
        name: "NewsContentList",
        data() {
            return {
                title: '',
                newsContent:[],
                wrapperHeight: 0,
                showSpinner: true,
                page: 1,
                offset: 10,
                topStatus: 'loading',
                allLoaded: false, //数据是否全部加载完毕，全部加载完毕则不会出现上拉加载底部的样式
                wrapperHeight: 0,
                bottomStatus: '',
                isDropDown: false, //是否是上拉加载
                isDropUp: false, //是否是下拉加载
                SingleDataLoaded : false, //判断当前请求数据是否请求结束，数据加载开关
            }
        },
        mounted(){
            this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.offsetTop;
            $('.newsList').css('min-height', this.wrapperHeight);
            this.getNewMessage();
        },
        methods: {
            initPage(){
                this.title = this.$route.query.text;
            },
            dataInit() {
                this.page = 1;
                this.allLoaded = false;
                this.bottomStatus = '';
            },
            endData(){
            	//上拉或下拉加载结束语句，并数据置为初始值
				this.isDropDown? this.$refs.loadmore.onBottomLoaded() : '';
        		this.isDropUp? this.$refs.loadmore.onTopLoaded() : '';
        		this.loadBottomFlag = false;
        		this.loadTopFlag = false;
       			this.showSpinner = false;
        		this.SingleDataLoaded = true;
			},
             getNewMessage(){
             	const _this = this;
             	this.SingleDataLoaded = false;
                getnews(this.page,this.offset).then(resolve => {
                    this.page == 1? this.newsContent = resolve : this.newsContent.push(...resolve);
                    if(resolve.lenth<_this.offset){ //如果数据加载完了，提示
						Toast('已经加载全部数据');
						_this.allLoaded = true;
					}
                    _this.endData();
                },reject=>{
                    Toast(reject);
                    _this.endData();
                })
            },
            loadTop() {
            	this.isDropUp= true;
            	this.dataInit();
                this.getNewMessage();
            },
            // 上拉请求数据
            loadBottom() {
                if(!this.isLoaded){  return;  }
                this.isDropDown= true;
                // 当前展示数据等于请求数据时再请求数据
                this.getNewMessage();
            },
            // 改变上拉加在页面状态
            handleBottomChange(status) {
                this.bottomStatus = status;
            },
        },
        created(){
            this.initPage();
        }
    }
</script>

<style scoped lang="scss">
    .NewsContentList {
        .newsList{
            overflow: auto;
        }
    }
     .NewsCardContent {
        transition: all 0.3s;
        margin: 10px;
        background: #fff;
        padding: 10px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        .checkBox{
            transition: all 0.3s;
            /*width: 0;*/
            width: 4rem;
            height: 100%;
            text-align: center;
            overflow: hidden;
        }
        .newsDetail{
            transition: all 0.3s;
            flex: 1;
            &>div {
                color: #666666;
                span {
                    font-size: 1rem;
                    line-height: 2rem;
                    margin-right: 0.6rem;
                }
                &.title {
                    padding-left: 0;
                    display: flex;
                    justify-content: space-between;
                    font-size: 1.3rem;
                    color: #333333;
                    margin-bottom: 0.4rem;
                    .right {
                        font-size: 1.1rem;
                        color: #999999;
                        padding-top: 4px;
                        img {
                            width: 7px;
                            height: 11px;
                            margin-left: 0.433rem;
                        }
                    }
                    .taskCardBadge {
                        line-height: 1rem;
                        height: 1.5rem;
                        margin-top: 2px;
                        margin-left: 10px;
                        border-radius: 4px;
                    }
                }
            }
        }
        .unread{
            &:after{
                display: inline-block;
                /*float: right;*/
                position: relative;
                content: '';
                width: 7px;
                height: 7px;
                top: -9px;
                left: -2px;
                background: rgb(245, 89, 70);
                border-radius: 50%;
            }
        }
    }
</style>

需要注意的点

1. 上拉加载的时候，经常出现数据还没显示完就提示“已加载全部”
   * 原因是没有数据加载的开关，这边数据还没加载完，又开始了下次的加载
   * 所以每次加载前加一个加载开关flag，加载完成后再设置为true，false的时候，不触发新的加载。
2. 下拉加载的时候，重新加载数据，需要将一些数据重置，比如this.allLoaded=false;将页数page置为1。
3. 每次上拉完成后，必须加this.$refs.loadmore.onTopLoaded();，否则会有样式问题，也不能随便加，否则也会有样式问题
4. 每次下拉完成后，必须加this.$refs.loadmore.onBottomLoaded();，否则会有样式问题，也不能随便加，否则也会有样式问题
5. 需要给容器设置高度，以及底下元素的最小高度，否则会有样式问题

this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.offsetTop;
$('.newsList').css('min-height', this.wrapperHeight)