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