这里使用的是mint UI的loadmore组件
文档地址:
minui
效果图:
引入:
import { Loadmore } from 'mint-ui';
Vue.component(Loadmore.name, Loadmore);
代码:
至于这个结构的话,我发现把方法都写在组件上,会有分页bug,所以把下拉方法写在了组件内部的盒子上
<mt-loadmore
:top-method="loadTop"
:bottom-all-loaded="GETDealData.input.allLoaded"
ref="loadmore"
:auto-fill="false">
<div v-infinite-scroll="loadBottom"
:infinite-scroll-disabled="GETDealData.input.loadBottom"
infinite-scroll-distance="5">
<business-orderCard v-for="(item,index) in GETDealData.output.value.rows" :key="index" :info="item" @toPage="toPage(item)" :dataType="activeTabId"></business-orderCard>
</div>
</mt-loadmore>
data(){
return{
//数据列表
GETDealData:{
input:{
value:{
pIdx:0,
pSize:8,
"sort": 'fee', // 排序字段
"sortType": 'DESC', // 排序方式
plateColor:undefined,
plateNumber:undefined,
isPresence:1
},
isPresence:true,
//
allLoaded:false,
loadBottom:false,
//
loading: false,
error: false,
finished: false,
},
output:{
value:{
total:0,
rows:[]
}
}
},
}
}
methods:{
//下拉刷新
async loadTop () {
this.$refs.loadmore.onTopLoaded()
let data = await this.methods('loadMore', 1)
this.methods('setDataList', 'top', data)
},
//上拉 加载更多
async loadBottom () {
// console.log('自动执行')
if(this.GETDealData.input.allLoaded)return
let data = await this.methods('loadMore', this.GETDealData.input.value.pIdx + 1)
this.methods('setDataList', 'bottom', data)
},
//下拉刷新 加载更多
@Model('GETDealData')
async loadMore (index) {
let data
this.GETDealData.input.value.pIdx = index
await this.http({
cmd: 'GETChasepayWait',
input: this.GETDealData.input.value,
success (res) {
if (res.code === 200) {
data = res.data
if(res.data.rows.length<this.GETDealData.input.value.pSize){
this.GETDealData.input.allLoaded = true
}
}
}
})
return data
}
}