非原创，此方法经过前辈的方法做了一小部分修改
封装统一的loadPage.js文件
export default {
data() {
return {
initial: {
createdIsNeed: true, // 此页面是否在创建时，调用查询数据列表接口？
apiName: '', // API名称
getDataListIsPage: false, // 是否分页
},
loadingStatus: 'loadmore', //loadmore:上滑加载更多 loading:加载中 nomore:我是有底线的 noData 显示empty组件暂无数据
timer: {
pull: null,
reachBottom: null,
},
iconType: 'circle',
dataForm: {}, // 请求参数
dataList: [], // 请求到的数据
listName:'',// 请求的数据列表名称
page: 1, // 页码
pageSize: 10,
totalSize: '' // 总条数
}
},
created() {
if (this.initial.createdIsNeed) {
this.getDataList()
}
},
onPullDownRefresh() {
this.dataList = []
this.loadingStatus = 'loading'
this.timer.pull = setTimeout(() => {
this.getDataList()
}, 1000)
},
onReachBottom() {
this.loadmore()
},
activated() {},
methods: {
loadmore(){
if (this.totalSize === 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)
}
},
coverItem(item){ //转化每个列表项的数据内容 必须返回一个对象
return item
},
clearTimer() {
for (let key in this.timer) {
clearTimeout(this.timer[key])
this.timer[key] = null
}
},
getDataList(callback) {
this.page = 1
this.loadingStatus = "loadmore"
this.getData(callback)
},
// 获取数据
getData(callback, hideLoading) {
if(hideLoading){
this.loadingStatus = "loading"
}
let args = {
paginate: {
page: this.initial.getDataListIsPage ? this.page : null,
pageSize: this.initial.getDataListIsPage ? this.pageSize : null
},
...this.dataForm
}
this.initial.apiName(args).then(res => {
let list = res[this.listName].map(this.coverItem)
if (this.initial.getDataListIsPage == true && this.page !== 1) {
this.dataList = this.dataList.concat(list)
} else {
this.dataList = list
}
this.totalSize = res.paginate.totalSize
}).finally(() => {
if(this.dataList.length){
this.dataList.length == this.totalSize ? this.loadingStatus = "nomore" : this.loadingStatus = 'loadmore'
}else{
this.loadingStatus = "noData"
}
})
}
},
onHide() {
this.clearTimer()
},
onUnload() {
this.clearTimer()
},
destroyed() {
this.clearTimer()
}
}
ListLoadingMore.vue组件（我使用的是uniapp的ui框架uview 地址：https://uviewui.com）
<template>
<view class="load">
<u-loadmore v-if="status!=='noData'" :status="status" :loadText="loadText"
:icon-type="iconType" @loadmore="()=>{$emit('loadmore')}"/>
<u-empty v-else :text="emptyText" :mode="emptyIcon"></u-empty>
</view>
</template>
<script>
export default {
props:{
status: { //加载状态
type: String,
default: 'loadmore'
},
iconType:{
type: String,
default: 'circle'
},
loadText:{
type: Object,
default: ()=>{
return {
loadmore: '点击或上拉加载更多',
loading: '正在加载...',
nomore: '没有更多了'
}
}
},
emptyIcon: { //支持类型参考https://uviewui.com/components/empty.html
type: String,
default: 'list'
},
emptyText: {
type: String,
default: '暂无数据'
}
},
data() {
return {
};
}
}
</script>
<style lang="scss">
.load{
padding-top: 30upx;
}
</style>
使用示例页面
<template>
<view class="pages">
<view class="page-top">
<view class="search">
<u-search placeholder="请输入名称/编码" v-model="dataForm.keyword" bg-color="#fff" :show-action="false" @search="getDataList"></u-search>
</view>
<view class="add-btn">
<u-icon name="plus-circle" size="40" color="#4e99ff" @click="goEdit"></u-icon>
</view>
</view>
<view class="list-content">
<view class="list-item" v-for="(item,index) in dataList" :key="item.id" @click.prevent.stop="goDetail(index)">
{{item.name}}
</view>
<list-loading-more :status="loadingStatus" @loadmore="loadmore"></list-loading-more>
</view>
</view>
</template>
<script>
import loadPage from '@/common/mixins/loadPage.js'
import ListLoadingMore from '@/components/local/ListLoadingMore.vue'
import {queryProductionEqList} from '@/common/api/commSub/equipment.js'
export default {
components: {
ListLoadingMore
},
mixins:[loadPage],
data() {
return {
initial:{
apiName: queryProductionEqList, // API地址
getDataListIsPage: true ,// 是否分页
},
listName: 'equipmentList',
dataForm: { //请求参数
keyword: ''
}
}
},
created(){
},
methods: {
goDetail(index){
this.$router.push({name:'equipmentDetail',query:{info:this.dataList[index],pageName:'ProductionEquipment'}})
},
goEdit(){
this.$router.push({name:'equipmentForm',query:{type:'add'}})
}
}
}
</script>
<style lang="scss">
</style>
说明：
在页面中采用mixins方式混入
页面中新写同名变量/函数 会覆盖此文件中的同名变量/函数
使用时 可在页面上data中重新声明以下变量
apiName: queryUserList, // API地址
getDataListIsPage: true ,// 是否分页
},
listName: 'tellerList',// 请求的数据列表名称
dataForm: { //请求参数
keyword: ''
}
提供函数
coverItem 转化得到的list列表中的对象 此函数必须返回一个object
请求得到的列表数据最后都是 dataList
若不想页面在创建时就查询 需要在使用的页面中，将inital中的createdIsNeed设为false，并在需要请求数据时，直接调用 this.getDataList()
要想下拉刷新，必须在page.json中去配置该页面的enablePullDownRefresh为true
