<template>
	<view class="view-">
		<z-paging ref="paging" v-model="dataList" @query="queryList" :auto-clean-list-when-reload="false"
			:auto-scroll-to-top-when-reload="false" :refresher-status.sync="refresherStatus"
			:auto-show-back-to-top="true" :back-to-top-with-animate="true" :auto="false">

			<template #top>
				<navbarback pageTitle="列表" bg="#fff" type="black"></navbarback>
			</template>
			
			<template #bottom>
			</template>
			
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: getApp().globalData.systemInfo.statusBarHeight,
				dataList: [],
				refresherStatus:null,
				page:1,
				limit:10,
				
				pageV2: 1,				//	当前点击的第几页
				indexV2: 0,				//	当前点击数组里的第几项
				pageScene: -1,			//	-1 首次    0=不需要刷新    1=需要替换列表数据item
				
			}
		},
		onLoad(options) {
			
		},
		onShow() {
			let that = this
			this.$nextTick(()=>{
				// console.log(this.pageScene,'pageScene')
				if (this.pageScene == -1) {
					//	需要初始化数据：(eg 首次进入页面)
					this.initListQuery()
				} else if (this.pageScene == 1) {
					//	替换数据
					this.initListQueryUpdate();
				}
				this.pageScene = 0;
			})
		},
		methods: {
			/**
			 * z-pagind 数据请求
			 * 
			 * @param {Object} page
			 * @param {Object} limit
			 */
			queryList(page, limit) {
				this.page = page
				this.limit = limit
			
				this.getDataList()
			},
			
			/**
			 * 初始化数据
			 * 
			 */
			initListQuery() {
				if (this.$refs.paging) {
					this.$refs.paging.reload()
				}
			},
			
			/**
			 * 为了更新数据
			 * 
			 */
			initListQueryUpdate() {
				console.log('更新当前分页的数据_________________start')
				this.pageV2 = this.getPageV2(this.indexV2, this.limit)
				this.getDataList(this.pageV2)
				console.log('更新当前分页的数据_________________end')
			},
			
			/**
			 * 计算当前点击的页码
			 * 
			 * @param {Object} index
			 * @param {Object} mylimit
			 */
			getPageV2(index, mylimit) {
				if (!mylimit) {
					return 1;
				}
				// 计算当前是第几页
				return Math.floor(index / mylimit) + 1;
			},
			
			/**
			 * 真实请求获取列表数据
			 * 
			 */
			async getDataList(pageV2 = -1) {
				let dataList = []
				try {
					
					let params = {
						page:pageV2>-1?pageV2:this.page,
						limit:this.limit,
						showLoading:true,
					}
					
					let res = await getSJDataList(params);
					
					if (res.code === 0 && res.data && res.data.list && res.data.list.length>0) {
						dataList = res.data.list
						// ========================================================== 替换数据
						if (pageV2 > -1) {
							
							if (this.dataList[this.indexV2]) {
								//	
								let id = this.dataList[this.indexV2].id
								let find = dataList.find(e=>e.id == id)
								
								if (find) {
									console.log('覆盖指定数据')
									this.dataList[this.indexV2] = find
								} else {
									//	可能被删除
									this.dataList.splice(this.indexV2,1)
								}
								
								console.log('只更新当前页面数据 indexV2='+this.indexV2+'____pageV2='+pageV2+'___id='+id)
							} else {
								console.log('只更新当前页面数据 indexV2='+this.indexV2+'____pageV2='+pageV2)
							}
							
							return
						}
						// ==========================================================
						
					}
				} catch (err) {
					console.log(err,'err')
				}
				
				if (this.$refs.paging) {
					this.$refs.paging.complete(dataList);
				}
			},
			
			/**
			 * 点击添加的情况  pageScene = -1
			 * 
			 */
			onClickAdd() {
				this.pageScene = -1
				
			},
			
			/**
			 * 点击跳转详情
			 * 
			 * @param {Object} item
			 * @param {Object} index
			 */
			onClickDetail(item,index) {
				this.pageScene = 1
				
				this.indexV2 = index
				
			},







			
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

</style>

✅ Copy success!
copy