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