下拉分页组件优化
This commit is contained in:
aihe
parent
1fd8e286a6
commit
b2bbaab61c
@ -1,14 +1,13 @@
|
||||
<template>
|
||||
<scroll-view :scroll-y="true" @scrolltolower="onScrollBottom()" style="height: 100%;"
|
||||
>
|
||||
<scroll-view :scroll-y="true" @scrolltolower="onScrollBottom()" style="height: 100%;">
|
||||
<slot></slot>
|
||||
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<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;">
|
||||
<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,37 +16,98 @@
|
||||
|
||||
<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() {
|
||||
|
||||
},
|
||||
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,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.sch-cont{
|
||||
.sch-cont {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
@ -2,70 +2,61 @@
|
||||
<tpx-layout>
|
||||
<template v-slot:header> </template>
|
||||
<template v-slot:body>
|
||||
<scroll-view :scroll-y="true" @scrolltolower="onScrollBottom()" class="pos-abt-all"
|
||||
>
|
||||
<view class="pgb-header">
|
||||
<view class="com-jianju">
|
||||
<!-- 关键字搜索框 -->
|
||||
<tpx-search placeholder="请输入姓名/电话/地址关键字" v-model:value="searchParam.keyword" @change="handleSearchParamChange()" ></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"
|
||||
>
|
||||
<text slot>
|
||||
(<text>{{curTab.item.val}}</text>)
|
||||
</text>
|
||||
</tpx-tabs>
|
||||
</u-col>
|
||||
|
||||
</u-row>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pgb-cont">
|
||||
<!-- 列表数据 -->
|
||||
<view v-for="(item) in dataList" class="data-list-item">
|
||||
<view @click="handleItemClick(item)">
|
||||
<u-row>
|
||||
<view class="pr-20">
|
||||
<u-text :text="item.name" size="30" :bold="true"></u-text>
|
||||
</view>
|
||||
<view>
|
||||
<u-text :text="item.phone" size="28" mode="phone" color="#999"></u-text>
|
||||
</view>
|
||||
</u-row>
|
||||
<u-text :text="getAddressDetail(item)"
|
||||
size="24" margin="20rpx 0 0 0" color="#999"
|
||||
></u-text>
|
||||
<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"></tpx-search>
|
||||
</view>
|
||||
<u-line color="#DEDEDE" margin="30rpx 0 0 0"></u-line>
|
||||
|
||||
<u-row custom-style="margin-top:20rpx;" justify="between">
|
||||
<u-row>
|
||||
<text class="pr-20 clr-sub">默认地址</text>
|
||||
<u-switch v-model="item.blDefaultFlag" @change="handleDefaultSwitch(item)" active-color="#B12D29" size="34"></u-switch>
|
||||
|
||||
<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"
|
||||
v-slot="curTab"
|
||||
>
|
||||
<text slot>
|
||||
(<text>{{curTab.item.val}}</text>)
|
||||
</text>
|
||||
</tpx-tabs>
|
||||
</u-col>
|
||||
|
||||
</u-row>
|
||||
<u-row>
|
||||
<u-text @click="handleEditItem(item)" text="编辑" prefixIcon="edit-pen" size="26"></u-text>
|
||||
<u-text @click="handleDelItem(item)" text="删除" prefixIcon="trash" size="26" margin="0 0 0 20rpx"></u-text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pgb-cont">
|
||||
<!-- 列表数据 -->
|
||||
<view v-for="(item) in resData.list" class="data-list-item">
|
||||
<view @click="handleItemClick(item)">
|
||||
<u-row>
|
||||
<view class="pr-20">
|
||||
<u-text :text="item.name" size="30" :bold="true"></u-text>
|
||||
</view>
|
||||
<view>
|
||||
<u-text :text="item.phone" size="28" mode="phone" color="#999"></u-text>
|
||||
</view>
|
||||
</u-row>
|
||||
<u-text :text="getAddressDetail(item)"
|
||||
size="24" margin="20rpx 0 0 0" color="#999"
|
||||
></u-text>
|
||||
</view>
|
||||
<u-line color="#DEDEDE" margin="30rpx 0 0 0"></u-line>
|
||||
|
||||
<u-row custom-style="margin-top:20rpx;" justify="between">
|
||||
<u-row>
|
||||
<text class="pr-20 clr-sub">默认地址</text>
|
||||
<u-switch v-model="item.blDefaultFlag" @change="handleDefaultSwitch(item)" active-color="#B12D29" size="34"></u-switch>
|
||||
</u-row>
|
||||
<u-row>
|
||||
<u-text @click="handleEditItem(item)" text="编辑" prefixIcon="edit-pen" size="26"></u-text>
|
||||
<u-text @click="handleDelItem(item)" text="删除" prefixIcon="trash" size="26" margin="0 0 0 20rpx"></u-text>
|
||||
</u-row>
|
||||
</u-row>
|
||||
</u-row>
|
||||
</view>
|
||||
</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>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</tpx-scroll-view>
|
||||
</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)
|
||||
}
|
||||
|
||||
},
|
||||
getListFun: apiService.getCustomerUserAddressList,
|
||||
|
||||
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)
|
||||
},
|
||||
handleItemClick(item){
|
||||
switch(this.queryOption.type) {
|
||||
case 'choose':
|
||||
|
||||
Loading…
Reference in New Issue
Block a user