【无标题】

关于uniapp的第二次项目坑点

1. 在使用uniapp的时候，你是否发现uniapp中uni-data-select的一个问题呢？当我们从上级页面进入下级页面将data作为参数传入，在vue中肯定是先加载mounted，然后获取到数据。但是呢，在uniapp中不是这样，首先加载的是html页面，所以呢，在使用uniapp中uni-data-select的时候我们应该怎么操作，才能不让控制台报错，并且能使页面正确的显示数据呢？那我就这样想，在进入页面的时候不是没有数据嘛，那说明我在下级页面数据的长度为0，我就用一个v-if做个判断，当没有数据的时候，uni-data-select不显示，等数据加载好了我就让它显示。代码如下：

<uni-data-select v-if="warehouseList.length>0" placeholder="请选择仓库" :styles="style"
v-model="returnForm.newWarehouse.id" :localdata="warehouseList"
@change="handleReturnWarehouseChange">
</uni-data-select>

2.然后这里说说返回上级页面数据刷新，在网上我找了三种解决方案，
第一种：

B页面
onUnload(){
            uni.$emit("getlist",{})//这里可以传个空,也可以传值过去
            uni.navigateBack({ // 返回上一页
				delta: 1
			})
   }
A页面
onShow(){
    uni.$on("getlist", (e)=>{
        this.getwrongtllist();//需要重新访问一下接口。
     }) 
},
// 用这种方法需要清除，负责会一直调用多次接口
onUnload() {
	// 清除监听
	uni.$off('getlist');
},
// 或者有组件的使用不了小程序的生命周期可以使用  beforedestroy

第二种

A页面
export default {
  data() {
    return {
	     refreshIfNeeded: false,
		}
  }
}
onShow() {
    var pages = getCurrentPages(); // 获取当前页面栈
    var currentPage = pages[pages.length - 1]; // 当前页面
    if (currentPage.data.refreshIfNeeded) {
      currentPage.data.refreshIfNeeded = false;
      this.mescroll.resetUpScroll(); // 调用列表重置刷新页面
      this.mescroll.scrollTo(0,0); // 滚动页面置顶
    }
  }

第三种

B页面 返回
payData.success = (res) => {
	uni.showToast({
		title: '支付成功',
		success: () => {
			setTimeout(() => {
				uni.navigateBack();
			}, 2000)
		}
	})
}

A页面 返回的时候可以先清空数据，然后再请求一次接口
onShow() {
	this.orderList = []
	this.currentPage = 1
	this.gettradelist()
}

在我进行手机端调试的时候，第二种跟第三种没有效果，第一种有效果，而且第一种不仅可以传对象，还可以传函数过去。
请阅读以下代码：

下级页面：B页面
submit() {
			this.$refs.form.validate().then(res => {
				return new Promise((resolve, reject) => {
					postform.transfer(this.formData).then(response => {
						console.log('HHHIFIWEF')
						uni.$emit('returnDataList')
						goBack('已消废，即将返回', {
							delta: 1,
							success: (res) => {
								// 通过eventChannel向被打开页面传送数据
								// 获取所有页面栈实例列表
								let pages = getCurrentPages();
								// 上一页页面实例
								let prevPage = pages[ pages.length - 2 ];
								// 修改上一页data里面的times参数值为100
								prevPage.$vm.refreshFlag = false;
							}
						})
						resolve()
					}).catch(error => {
						reject(error)
					})
				})

			})
		},
上级页面：A页面
onShow() {
		uni.$off('returnDataList')
		uni.$on('returnDataList')
		const eventChannel = this.getOpenerEventChannel();
		// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
		eventChannel.on('pulldata', (data) => {
			if(data.data.vue_path.indexOf('sample')>0){
				this.target = 'sample'
				this.targetCn = '样品危化品记录'
				this.entityTypes= [3]
				uni.setNavigationBarTitle({
					title:this.targetCn
				})
				console.log('this.entityTypes',this.entityTypes)
				this.dataInfo = data.data
				console.log('this.dataInfo',this.dataInfo)
			}else{
				this.entityTypes = [1,2]
			}
		})
		setTimeout(() => {
			this.refreshFlag = true
		}, 10)

	},

在这里给大家留下一个问题，如果在日历中，我要请求数据，但是呢这个时候我们的用户点的很快，比如客户要点周五，一直按着周来点每周周五，此时会发生这样的一个情况，第一条接口请求完成，第二条接口因为数据的原因所以请求的较慢点，那么，此时我们的页面显示的数据就是第一条接口。请问如何能有效的解决异步问题？提示：这个问题不是简单的用防抖节流能解决的。下周我发布解决方案。如果写的不好，可以不看，我本来就不怎么写文章。如果写的好，对你有用处，那我很高兴这篇文章能帮助到你。其中有错误请直接评论区回复，thanks。