<template>
<div>
<mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" @bottom-status-change="handleBottomChange" :auto-fill="autoFill">
<div v-for="history in historylist" >
<div>{{history}}</div>
<div slot="bottom" class="mint-loadmore-bottom">
<span v-show="bottomStatus === 'pull'">{{bottomPullText}}</span>
<span v-show="bottomStatus === 'drop'">{{bottomDropText}}</span>
<span v-show="bottomStatus === 'loading'">
<mt-spinner type="snake"></mt-spinner>
</span>
</div>
</mt-loadmore>
</div>
</template>
<style>
.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>
<script>
import { Loadmore } from 'mint-ui'
export default {
data() {
return {
historylist : [],
allLoaded: false,
autoFill: false,//若为真,loadmore 会自动检测并撑满其容器
currentpageNum: 1,//当前页数
limit: 20,//每页条数
totalNum: null,//总数
bottomStatus: '',
bottomPullText: '上拉加载更多...',
bottomDropText: '释放更新...'
}
},
methods:{
loadBottom() {
setTimeout(() => {
if (this.totalNum - this.currentpageNum * this.limit > 0) {
//alert(this.totalNum - this.currentpageNum * this.limit)
this.currentpageNum++;
this.$http.get('/rest/historylist/'
+ this.currentpageNum + "/" + this.limit + '/historylist'
, { emulateJSON: true }).then((data) => {
if (data.data.rows.length > 0) {
for (var i = 0; i < data.data.rows.length; i++) {
this.historylist.push(data.data.rows[i]);
}
}
})
} else {
this.allLoaded = true;
}
this.$refs.loadmore.onBottomLoaded();
}, 1500);
},
handleBottomChange(status) {
this.bottomStatus = status;
//console.log(this.bottomStatus)
},
},
created() {
this.$http.get('/rest/historylist/'
+ this.currentpageNum + "/" + this.limit + '/historylist'
, { emulateJSON: true }).then((data) => {
this.totalNum = data.data.total;
this.historylist = data.data.rows;
})
}
}
</script>
autoFill
最好设置为false
,否则一开始会自动加载一遍 loadBottom
.本例实现的效果为每次上拉加载 limit
条数,通过 currentpageNum
把当前页数传到后台获取数据,通过判断 bottomStatus
来改变提示的文字。第一次写博客,如有不对之处,欢迎指出,大家一起交流。
附上mint-ui文档 Loadmore