非原創(chuàng)它匕，此方法經(jīng)過前輩的方法做了一小部分修改
封裝統(tǒng)一的loadPage.js文件
export default {
data() {
return {
initial: {
createdIsNeed: true, // 此頁面是否在創(chuàng)建時辑甜，調(diào)用查詢數(shù)據(jù)列表接口灭将？
apiName: '', // API名稱
getDataListIsPage: false, // 是否分頁
},
loadingStatus: 'loadmore', //loadmore:上滑加載更多 loading:加載中 nomore:我是有底線的 noData 顯示empty組件暫無數(shù)據(jù)
timer: {
pull: null,
reachBottom: null,
},
iconType: 'circle',
dataForm: {}, // 請求參數(shù)
dataList: [], // 請求到的數(shù)據(jù)
listName:'',// 請求的數(shù)據(jù)列表名稱
page: 1, // 頁碼
pageSize: 10,
totalSize: '' // 總條數(shù)
}
},
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){ //轉(zhuǎn)化每個列表項(xiàng)的數(shù)據(jù)內(nèi)容 必須返回一個對象
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)
},
// 獲取數(shù)據(jù)
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: { //加載狀態(tài)
type: String,
default: 'loadmore'
},
iconType:{
type: String,
default: 'circle'
},
loadText:{
type: Object,
default: ()=>{
return {
loadmore: '點(diǎn)擊或上拉加載更多',
loading: '正在加載...',
nomore: '沒有更多了'
}
}
},
emptyIcon: { //支持類型參考https://uviewui.com/components/empty.html
type: String,
default: 'list'
},
emptyText: {
type: String,
default: '暫無數(shù)據(jù)'
}
},
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: { //請求參數(shù)
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方式混入
頁面中新寫同名變量/函數(shù) 會覆蓋此文件中的同名變量/函數(shù)
使用時 可在頁面上data中重新聲明以下變量
apiName: queryUserList, // API地址
getDataListIsPage: true ,// 是否分頁
},
listName: 'tellerList',// 請求的數(shù)據(jù)列表名稱
dataForm: { //請求參數(shù)
keyword: ''
}
提供函數(shù)
coverItem 轉(zhuǎn)化得到的list列表中的對象 此函數(shù)必須返回一個object
請求得到的列表數(shù)據(jù)最后都是 dataList
若不想頁面在創(chuàng)建時就查詢 需要在使用的頁面中寸癌，將inital中的createdIsNeed設(shè)為false掺冠，并在需要請求數(shù)據(jù)時狮腿，直接調(diào)用 this.getDataList()
要想下拉刷新杨名，必須在page.json中去配置該頁面的enablePullDownRefresh為true
