aike/emis-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

下拉分页组件优化

Browse Source
This commit is contained in:
aihe 2024-04-25 17:43:51 +08:00
parent 1fd8e286a6
commit b2bbaab61c
2 changed files with 128 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
components/tpx-scroll-view/tpx-scroll-view.vue
View File

@ -1,6 +1,5 @@
<template>
<scroll-view :scroll-y="true" @scrolltolower="onScrollBottom()" style="height: 100%;"
>
<scroll-view :scroll-y="true" @scrolltolower="onScrollBottom()" style="height: 100%;">
<slot></slot>
<!-- 加载更多 -->
@ -8,7 +7,7 @@
:status="loadedAll ? 'nomore' : 'loading'" />
<!-- 空数据页 -->
<view v-if="dataList.length == 0" style="padding-top: 100rpx;">
<view v-if="resObject.list.length == 0" style="padding-top: 100rpx;">
<u-empty text="无数据" :icon="getCdnUrl('kong.png')" textSize="28" width="86" height="97">
</u-empty>
</view>
@ -17,21 +16,45 @@
<script>
export default {
watch: {
searchParam: {
handler(cval, oval) {
this.getDataList(true)
},
deep: true
}
},
props: {
dataList: {
searchParam: {
default () {
return []
return {}
}
},
getListFun: {
default () {
return () => {}
}
},
resObject: {
default () {
return {
list: []
}
}
}
},
data() {
return {
showLoadMore: false,
loadedAll: false,
page: { // 分页参数
pageNum: 1,
pageSize: 20,
},
showLoadMore: false, // 是否显示加载更多的loading
loadedAll: false, // 是否加载了所有数据
}
},
created() {
this.getDataList(true)
},
onHide() {
@ -39,8 +62,45 @@
unmounted() {},
methods: {
onScrollBottom(){
async onScrollBottom() {
this.$emit('onScrollBottom')
if (this.loadedAll || this.showLoadMore) {
return
}
this.showLoadMore = true
this.page.pageNum++
await this.getDataList()
this.showLoadMore = false
},
async getDataList(reload) {
if (reload) {
this.page.pageNum = 1
this.showLoading()
}
const res = await this.getListFun({
...this.page,
...this.searchParam
})
let list = res.rows || []
if (reload) {
this.hideLoading()
} else {
list = this.resObject.list.concat(list)
}
this.loadedAll = res.total <= list.length
this.updateRes({
list,
total: res.total
})
},
updateRes(obj) {
this.$emit('update:resObject', {
...this.resObject,
page: this.page,
showLoadMore: this.showLoadMore,
loadedAll: this.loadedAll,
...obj,
})
}
}
}

63
pages/address/list.vue
View File

@ -2,19 +2,19 @@
<tpx-layout>
<template v-slot:header> </template>
<template v-slot:body>
<scroll-view :scroll-y="true" @scrolltolower="onScrollBottom()" class="pos-abt-all"
>
<view class="pos-abt-all">
<tpx-scroll-view v-model:resObject="resData" :searchParam="searchParam" :getListFun="getListFun">
<view class="pgb-header">
<view class="com-jianju">
<!-- 关键字搜索框 -->
<tpx-search placeholder="请输入姓名/电话/地址关键字" v-model:value="searchParam.keyword" @change="handleSearchParamChange()" ></tpx-search>
<tpx-search placeholder="请输入姓名/电话/地址关键字" v-model:value="searchParam.keyword"></tpx-search>
</view>
<view class="com-jianju" style="padding-top: 40rpx;">
<u-row justify="between" align="top">
<u-col span="12">
<tpx-tabs :list="tabList" v-model:value="searchParam.addressType"
@tabchange="(val)=> { handleSearchParamChange() }" v-slot="curTab"
v-slot="curTab"
>
<text slot>
(<text>{{curTab.item.val}}</text>)
@ -27,7 +27,7 @@
</view>
<view class="pgb-cont">
<!-- 列表数据 -->
<view v-for="(item) in dataList" class="data-list-item">
<view v-for="(item) in resData.list" class="data-list-item">
<view @click="handleItemClick(item)">
<u-row>
<view class="pr-20">
@ -54,18 +54,9 @@
</u-row>
</u-row>
</view>
<!-- 加载更多 -->
<u-loadmore icon-size="28" font-size="28" margin-top="30" v-if="showLoadMore || loadedAll"
:status="loadedAll ? 'nomore' : 'loading'" />
<!-- 空数据页 -->
<view v-if="dataList.length == 0" style="padding-top: 100rpx;">
<u-empty text="无数据" :icon="getCdnUrl('kong.png')" textSize="28" width="86" height="97">
</u-empty>
</view>
</tpx-scroll-view>
</view>
</scroll-view>
</template>
<template v-slot:footer>
@ -111,8 +102,6 @@
return {
tabList ,
searchParam: {
pageNo: 1,
pageSize: 10,
keyword: '',
addressType: tabList[0].val
},
@ -120,8 +109,9 @@
tab: tabList[0].val, // 当前tab
type: '', // 'choose' 选择操作
},
dataList: [
],
resData: {
list: []
},
showLoadMore: false,
loadedAll: false
}
@ -143,41 +133,10 @@
methods: {
getAddressDetail,
initData(){
uni.stopPullDownRefresh();
this.setListData(true)
},
async setListData(reload) {
if(reload) {
this.searchParam.pageNo = 1
this.showLoading()
}
const res = await apiService.getCustomerUserAddressList(this.searchParam)
const list = res.rows || []
if(reload) {
this.dataList = list
this.hideLoading()
} else {
this.dataList = this.dataList.concat(list)
}
},
async onScrollBottom() {
if (this.loadedAll) {
return;
}
this.showLoadMore = true;
this.searchParam.pageNo ++
await this.setListData();
this.showLoadMore = false;
},
handleSearchParamChange(key, val) {
if(key) {
this.searchParam[key] = val
}
setTimeout(()=> {
this.setListData(true)
}, 300)
},
getListFun: apiService.getCustomerUserAddressList,
handleItemClick(item){
switch(this.queryOption.type) {
case 'choose':