mint ui : loadmore上拉刷新下拉加载

< template>

< div id= "app">

< mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :max-distance=" 150"

@top-status-change="handleTopChange" ref= "loadmore">

< div slot= "top" class= "mint-loadmore-top">

< span v-show="topStatus === 'pull'" :class="{ 'rotate': topStatus === 'drop' }">↓</ span>

< span v-show="topStatus === 'loading'">Loading...</ span>

< span v-show="topStatus === 'drop'">释放更新</ span>

</ div>

< ul class= "scroll-wrapper">

< li v-for="(item,index) in list" :key="index">{{ item }}</ li>

</ ul>

< div v-if="allLoaded">

没有更多了

</ div>

</ mt-loadmore>

</ div>

</ template>

< script>

import {Loadmore} from 'mint-ui';

export default {

data() {

return {

list: [],

allLoaded: false,

topStatus: ''

};

},

created: function () {

for ( let i = 0; i < 20; i ++){

this.list. push( 'demo' + i);

}

},

methods: {

loadTop: function () { // 刷新数据的操作

this.allLoaded = false;

setTimeout(() =>{

this.list. splice( 0, this.list.length);

let len = 20;

for ( let i = 0; i < len; i ++){

this.list. push( 'demo' + i);

}

this.$refs.loadmore. onTopLoaded();

}, 2000);

},

loadBottom: function () { // 加载更多数据的操作

//load data

console. log( this.list.length)

if( this.allLoaded){

return;

}

setTimeout(() =>{

let len = 10;

for ( let i = 0; i < len; i ++){

this.list. push( 'dddd' + i);

}

if( this.list.length > 40){

this.allLoaded = true; // 若数据已全部获取完毕

}

this.$refs.loadmore. onBottomLoaded();

}, 2000);

},

handleTopChange: function ( status) {

this.topStatus = status;

}

}

};

</ script>

< style>

*{

margin: 0;

padding: 0;

}

html, body{

height: 100 %;

}

#app{

height: 100 %;

overflow: scroll;

}

.scroll-wrapper{

margin: 0;

padding: 0;

list-style: none;

}

.scroll-wrapper li{

line-height: 120 px;

font-size: 60 px;

text-align: center;

}

</ style>