https://mint-ui.github.io/docs/#/zh-cn2/loadmore
使用的vue
<mt-loadmore
:top-method="loadTop"
:bottom-method="loadBottom"
:bottom-all-loaded="allLoaded"
ref="loadmore"
@top-status-change="handleTopChange"
@bottom-status-change="handleBottomChange"
bottomPullText="上拉加载"
bottomDropText="释放加载"
bottomLoadingText="加载中...">
<div class="r2">
<div class="res" v-for="(i,index) in 6" :key="index">
</div>
<div slot="top" class="mint-loadmore-top">
<span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">下拉刷新</span>
<span v-show="topStatus === 'loading'">刷新中...</span>
</div>
</mt-loadmore>
methods: {
handleTopChange(status) {
this.topStatus = status;
console.log(status + '下拉刷新')
},
handleBottomChange(status) {
console.log(status + '上拉加载')
},
loadTop() {
console.log('执行刷新')
this.$refs.loadmore.onTopLoaded();
},
onTopLoaded() {
console.log('刷新方法执行')
},
loadBottom() {
console.log('上拉加载执行')
this.$refs.loadmore.onBottomLoaded();
},
onBottomLoaded() {
console.log('加载方法执行')
},
goPath() {
this.$router.push({path: '/card'});
},
goBack() {
this.$router.back(-1)
}
},
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c74b605b8c017ad77853dcbb60bf5a64.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c5e745b98fb258eb35dc2afa5eac4889.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1e686414996ca294aefbb0634baf68b9.png)
<template>
<section style="display: flex;height: 100%;flex-direction: column;">
<x-header title="slot:overwrite-title" :left-options="{backText: ''}" style="background-color:#FFFFFF;">
<div class="xheader-title" slot="overwrite-title" color="#333333;">首页</div>
</x-header>
<div class="main">
<div class="r1">单位:元</div>
<div class="r2">
<mt-loadmore
:top-method="loadTop"
:bottom-method="loadBottom"
:bottom-all-loaded="allLoaded"
ref="loadmore"
@top-status-change="handleTopChange"
@bottom-status-change="handleBottomChange"
bottomPullText="上拉加载"
bottomDropText="加载更多"
bottomLoadingText="加载中...">
<div class="billlist">
<div class="bill" v-for="(i,index) in test" :key="index">
<div class="billr1">
<div>入款</div>
<div>100.00{{i}}</div>
</div>
<div class=" billr2">
<div>2018-11-23 11:03:03</div>
<div style="color: #005BAC">失败</div>
</div>
</div>
</div>
<div slot="top" class="mint-loadmore-top">
<span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">下拉刷新</span>
<span v-show="topStatus === 'loading'">刷新中...</span>
</div>
</mt-loadmore>
</div>
<div class="bottom">
<div class="service">
<div class="from">底部</div>
<div class="phone">123456</div>
</div>
</div>
</div>
</section>
</template>
<script>
import {XHeader} from 'vux';
import {Toast, Loadmore} from 'mint-ui';
export default {
components: {
XHeader,
},
data() {
return {
test: 10,
}
},
methods: {
handleTopChange(status) {
this.topStatus = status;
console.log(status + '下拉刷新')
},
handleBottomChange(status) {
console.log(status + '上拉加载')
},
loadTop() {
console.log('执行刷新')
this.$refs.loadmore.onTopLoaded();
},
onTopLoaded() {
console.log('刷新方法执行')
},
loadBottom() {
console.log('上拉加载执行')
this.test = this.test + 10;
if (this.test > 30) {
this.allLoaded = true;
}
this.$refs.loadmore.onBottomLoaded();
},
onBottomLoaded() {
console.log('加载方法执行')
},
},
mounted() {
},
}
</script>
<style lang="scss" scoped>
.main {
border-top: 1px solid #B2B2B2;
.r1 {
display: flex;
justify-content: flex-end;
margin-right: 14px;
color: #8B9094;
margin-top: 9px;
margin-bottom: 10px;
}
.r2 {
margin-bottom: -116px;
.billlist {
padding-left: 15px;
padding-right: 15px;
background-color: white;
.bill {
padding-top: 15px;
margin-bottom: 15px;
.billr1 {
display: flex;
justify-content: space-between;
}
.billr2 {
color: #8B9094;
margin-top: 8px;
display: flex;
justify-content: space-between;
padding-bottom: 7px;
border-bottom: 1px solid rgba(191, 191, 191, 0.81);
}
}
}
}
.bottom {
bottom: 0px;
margin-bottom: 20px;
margin-top: 130px;
width: 100%;
.buy-button {
margin: 0 15px;
margin-bottom: 43px;
height: 49px;
line-height: 49px;
text-align: center;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(0, 91, 172, 1);
border-radius: 24px;
span {
font-size: 18px;
font-weight: 500;
color: #005BAC;
}
}
.service {
text-align: center;
.from {
font-size: 12px;
font-weight: 400;
color: rgba(90, 96, 101, 1);
}
.phone {
font-size: 12px;
font-weight: 400;
color: rgba(90, 96, 101, 1);
span {
color: #629DD2;
}
}
}
}
}
</style>