下拉分页组件优化

components/tpx-scroll-view/tpx-scroll-view.vue

@@ -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,
+				page: { // 分页参数
-				loadedAll: false,
+					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,
+				})
 			}
 		}
 	}

pages/address/list.vue

@@ -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':