vue2 mint-ui loadmore(下拉刷新)

<template>

<div class="page-loadmore">
    <h1 class="page-title">Pull up</h1>

    <div class="page-loadmore-wrapper" ref="wrapper" :style="{height : wrapperHeight + 'px' }">
        <mt-loadmore
        :bottom-method="loadBottom"
        :bottom-all-loaded="allLoaded"
        @bottom-status-change="handleBottomChange"
        :auto-fill="false"
        ref="loadmore"
        >

        <ul class="page-loadmore-list">
            <li v-for="item in list" class="page-loadmore-listitem">{{ item }}</li>
        </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>
</template>

<script>
export default {
    data() {
        return {
            list: [],
            totalLength:'',     //数据总长度
            nowLength:'',       //当前list的长度
            nextLength:'',      //下一次的长度
            num:10,             //每页的数量
            allLoaded: false,   //是否全部加载
            wrapperHeight: 0,

            bottomStatus:''
        };
    },

    methods: {
        handleBottomChange(status){
            this.bottomStatus = status;
        },
        loadBottom() {
            setTimeout(() => {
                //console.log('nowLength:',this.nowLength)  //10
                //console.log('totalLength:',this.totalLength) //29
                if (this.nowLength <= this.totalLength) {
                    this.$http.jsonp('http://json.cn/json.php',
                    {
                        params:{},
                        jsonp:'callback'
                    }).then(function(res){
                        
                        if(this.nowLength+this.num<this.totalLength){
                            this.nextLength=this.nowLength+this.num
                        }else{
                            this.nextLength=this.totalLength
                        }

                        for(let i=this.nowLength; i<this.nextLength; i++){
                            this.list.push(res.data.s[i] + i)
                        }

                        this.nowLength+=this.num;
                    },function(res){
                        console.log(res.status);
                    })

                } else {
                    this.allLoaded = true;
                }
                this.$refs.loadmore.onBottomLoaded();
            }, 1500);
        }
    },

    created() {
        this.$http.jsonp('http://json.cn/json.php',
        {
            params:{},
            jsonp:'callback'
        }
      ).then(function(res){            //如果成功
          for(let i=0; i<this.num; i++){
              this.list.push(res.data.s[i] + i)  //将10条数据推入this.list
          }
          this.nowLength = this.list.length;     //nowLength=10
          this.totalLength = res.data.s.length;  //所有数据的长度29
      },function(res){        //如果失败
        console.log(res.status);
      })
    },

    mounted() { //wrapperHeight=可见区域高度-wrapper到视窗的顶部
        this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
    }
}
</script>

<style lang="less" scoped>
.page-loadmore-wrapper {
    overflow: scroll;
}

.page-loadmore-listitem {
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.page-loadmore-listitem:first-child {
    border-top: 1px solid #eee
}

.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>

 

参考：https://www.cnblogs.com/yuri2016/p/7045709.html