公用的上拉加载分页js : loadPage.js
export default {
data() {
return {
initial: {
createdIsNeed: true, // 此页面是否在创建时,调用查询数据列表接口?
geturl: '', // API地址
getDataListIsPage: false, // 是否分页
method: 'GET' // 请求方式
},
loadingStatus: 'more', //more:上滑加载更多 loading:加载中 noMore:我是有底线的
timer: {
pull: null,
reachBottom: null,
},
dataForm: {}, // 请求参数
dataList: [], // 请求到的数据
page: 1, // 页码
limit: 10,
total: '' // 总条数
// sort: '', // 排序字段
// sortMode: '' // 排序模式
}
},
created() {
if (this.initial.createdIsNeed) {
this.getDataList()
}
},
onPullDownRefresh() {
this.dataList = []
this.timer.pull = setTimeout(() => {
this.getDataList()
}, 1000)
},
onReachBottom() {
if (this.total === this.dataList.length) {
this.dataList.length ? this.loadingStatus = "noMore" : this.loadingStatus = "noData"
} else {
this.loadingStatus = "loading"
let hideLoading = true
this.timer.reachBottom = setTimeout(() => {
this.page++
this.getData(null, hideLoading)
}, 1000)
}
},
activated() {},
methods: {
clearTimer() {
for (let key in this.timer) {
clearTimeout(this.timer[key])
this.timer[key] = null
}
},
getDataList(callback) {
this.page = 1
this.loadingStatus = "more"
this.getData(callback)
},
// 获取数据
getData(callback, hideLoading) {
if(hideLoading){
this.loadingStatus = "loading"
}
this.$http({
url: this.initial.geturl,
method: this.initial.method,
hideLoading: hideLoading,
data: {
// sort: this.sort,
// sortMode: this.sortMode,
page: this.initial.getDataListIsPage ? this.page : null,
limit: this.initial.getDataListIsPage ? this.limit : null,
...this.dataForm
},
})
.then(({
data: res
}) => {
// if (res.code !== 0) {
// this.dataList = []
// this.total = 0
// uni.showModal({
// content: res.msg,
// showCancel: false
// })
// return
// }
if (this.initial.getDataListIsPage == true && this.page !== 1) {
this.dataList = res.list ? this.dataList.concat(res.list) : this.dataList.concat(res)
} else {
this.dataList = res.list ? res.list : res
}
this.total = res.total
if (callback) {
this.$nextTick(() => {
callback()
})
}
})
.catch(() => {}).finally(() => {
if(this.dataList.length){
this.dataList.length == this.total ? this.loadingStatus = "noMore" : this.loadingStatus = 'more'
}else{
this.loadingStatus = "noData"
}
})
}
},
onHide() {
this.clearTimer()
},
onUnload() {
this.clearTimer()
},
destroyed() {
this.clearTimer()
}
}
在vue文件中使用
<template>
<view class="page-body reward-list">
<view class="reward-card" v-for="item in dataList" :key="item.id">
{{item.name}}
</view>
<uni-load-more :status="loadingStatus"></uni-load-more>
</view>
</view>
</template>
<script>
import loadPage from '@/common/js/loadPage.js'
export default {
mixins:[loadPage],
data() {
return {
initial:{
geturl: '/markting/h5/benefitPageH5', // API地址
getDataListIsPage: true ,// 是否分页
}
}
},
created(){
},
methods: {
}
}
</script>
<style lang="scss">
page {
background: #f0f1f2;
}
</style>