uniapp中onShow比onLoad先渲染数据

最近，遇到一个问题，onLoad里面的异步函数没有调用完，也就是数据还没有返回来，onShow里面的异步函数就已经返回数据，并且渲染出来了，如果onLoad和onShow是同样的异步函数，那么就会导致数据无法及时的更新。

开发中的场景：开发中支付成功跳转到支付完成界面，点击支付完成界面的返回订单，跳转到全部订单界面。此过程中支付成功状态界面非我们制作，是别的项目组的，所以无法在此界面调用获取支付状态接口，只能在全部订单界面调用。

假设：A页面是订单页面，B页面是别人的支付完成界面，A页面中的

onLoad函数调用getPayState()支付状态函数和getData()获取订单列表数据函数

onShow中都有getData()获取订单列表数据函数

操作：点击B支付完成界面的返回订单按钮--》跳转到A全部订单界面

预想结果：执行onLoad中的两个函数，渲染数据，完成支付订单的渲染以及状态的变更。

出现的问题：onLoad开始执行getPayState()函数，此时没等到这个函数执行完毕，onShow里面的getData()函数开始执行，执行完毕渲染数据，此时页面显示所有的订单数据，但是！但是！因为getPayState()函数没有执行完毕，所以返回的支付订单数据中，新支付的那个订单支付状态是错误的！！！

解决措施1：因为onShow执行了getData()函数导致渲染的数据错误，所以直接注释掉这里面的函数，也就是onShow不用了。

再次出现的问题：因为onShow函数不用了，那么进行其他操作再次返回此页面不会再重新渲染数据。比如点击订单的申请退款按钮，提交完成之后，返回全部订单，应该再次调用getData()函数，但是onShow不用了，所以无法请求数据。onLoad不会调用。

解决措施2：针对onShow函数不用了，那么需要在退款的界面返回的时候，调用A页面订单界面的getData()函数，这个我尝试了很多，都不成，以失败告终。

解决措施3：设置变量show,在onLoad函数中，设置show为false，用于阻止onShow里面函数的调用。例如下面这样：

 onLoad(options) {this.onshow=falsethis.getPayStatus(options.RdSeq)this.getData();
},onShow() {        console.log("onShow")if(this.onshow){console.log("onShow请求订单数据")this.getData();}
},

此时就可以了，保证onLoad调用的时候，onShow不调用。

uniapp中onShow比onLoad先渲染数据相关推荐

uniapp中vue强制刷新部分视图数据
uniapp开发的时候经常会遇到想要修改当前数据中的部分数据,控制台输出发现是正确,但是界面显示还是旧数据. 试试 this.$set(obj, key, value):---this.$set(原对 ...
Uniapp中onShow()的应用
遇到问题: 在使用一些变量进行判断时,用完一次开始下一次判断时,结果会跟前一次一样,比如门禁中第一个房子打开后,切换到另外的房子,结果返回结果跟第一个房子一样. 原因分析: 用于使用了相同的变量进行判 ...
uniapp中checkbox复选框动态绑定数据
checkbox复选框动态绑定数据: <template><view class="box"><checkbox-group @change=&quo ...
uni-app的渲染数据和三种调接口的方法
渲染数据代码示例: <template><view class="content"><view class="page-section in ...
vue从后台获取新数据后刷新_vue项目中实现定时刷新页面（重新渲染数据实时更新）...
需求: 每隔一分钟自动刷新一下当前页面,同时发送请求,重新渲染数据,以到达实时更新. 开始: js有两种定时器 setInterval(function(){}, milliseconds)--会不停 ...
uniapp写小程序组件封装修改数据不渲染
uniapp写小程序组件封装修改数据不渲染数据通过props传进来的,对数据进行修改,js打印是有修改的,但是页面无变化,最好找的原因,props传入的数据是不能去直接操作的,可以使用其他方法,比如 ...
uni-app中使用腾讯位置服务实现小程序地图选点功能
文章目录 1. 官方文档 2. 小程序添加插件 3. HBuilder配置 4. 配置代码 5. 页面代码 1. 官方文档技术选定(地图选点插件) (对应官网:https://lbs.qq.com/ ...
Uniapp中使用高德地图，并在android studio中离线打包
Uniapp中使用高德地图,并在android studio中离线打包带高德地图功能的Uniapp的android离线打包 1. Uniapp中使用高德地图的方式 2. 高德地图中申请key 3. ...
uni-app中的数据绑定
uni-app中的数据绑定在页面中需要定义数据,和我们之前的vue一模一样,直接在data中定义数据即可 export default {data () {return {msg: 'hello-u ...

uniapp中onShow比onLoad先渲染数据

uniapp中onShow比onLoad先渲染数据相关推荐

最新文章

热门文章