前端(手机端)分页浏览数据，删除数据后，要怎么处理

前言

移动端列表页删除列表元素的功能

bug详情：首先是正常的获取一页数据（10个），然后都是划到底部触发加载下一页数据，然后我同事已经写好了删除功能，就很简单的列表移除元素，然后它导致的问题就是你删一个商品，你还没有感觉，等你商品删得多了，下面就变成空白了。。。。

解决

删除一条数据后，调用当前页接口，然后拿接口返回的列表最后一条数据判断这条数据与原有的列表数据的最后一条是否是同一个，不是就追加入列表，是就不进行处理。

			handleDelete(item, index) {
				let that = this;
				uni.showModal({
					title: '提示',
					showCancel: true,
					content: '确定删除' + item.spuName + '吗？',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '请稍候',
								mask: true
							})
							let params = {
								status: -1,
								spuId: item.spuId
							}
							// 删除接口
							api.prodsStatusUpdate(params).then(res => {
								if(res.code == '00000') {
									// 因为后台接口获取当前页数据有缓存没有即时更新，所以要手动延迟1秒
									setTimeout(function(){
										that.onDeleteSuccess(index)
									},1000)
								}
							}).catch(err => {
								uni.hideLoading()
							})
						}
					}
				});
			},
			onDeleteSuccess(index) {
				let that = this;
				console.log("删除完成后要补充数据")
				let params = this.params;
				api.page(params)
					.then(res => {
						console.log(JSON.stringify(res));
						if (res.code == '00000') {
							const {
								data
							} = res;
							this.params.total = data.total;
							let resList = data.list
							if(resList && resList.length > 0) {
								let newData = resList[resList.length-1]
								let filteredList = this.list.filter(item => item.spuId == newData.spuId)
								if(filteredList.length == 0) {
									this.list.push(newData);
								}
							}
						}
					}).finally(res=>{
						uni.hideLoading()
						// 移除删除成功的数据
						that.list.splice(index, 1);
						that.$refs.uToast.show({
							title: '商品删除成功',
							type: 'success',
							position: 'center',
							duration: 1500
						});
					});
			},