很显然 onShow的执行顺序要比 onTabItemTap早
onTabItemTap的特性是只在当前tabbar页面生效,比如onTabItemTap写在home页面,那么只有点击了tabbar上的home才会执行。
那是否有办法让onTabItemTap早于onShow先执行那?经过测试找到2种办法
方法一:
onShow: function () {setTimeout(() => {console.log('onShow')// 其他方法调用}, 50)
},onTabItemTap (item) {console.log('onTabItemTap')
}
用倒计时延迟执行onShow里的方法,缺点是页面的加载并不顺畅。
方法二:
async onShow() {await this.onTabItemTap()console.log('onShow')
},onTabItemTap (item) {console.log('item', item)
}
第一个item是await先执行的,导致无法传默认参数,获取失败
第二个item是进入页面默认执行的onTabItemTap,这种方法缺点显而易见2个大bug,不可取
如果不需要传默认参数,而只是单纯的想要改变顺序处理内部方法,可以这样写
data: {isTabItemTap:false,
}async onShow() {await this.onTabItemTap()console.log('onShow')
}onTabItemTap () {if(!this.data.isTabItemTap){this.setData({isTabItemTap: true})console.log('onTabItemTap')}else{console.log('onTabItemTap')}
}
这种方法可以解决内部调用方法的顺序,但是缺点是onTabItemTap还是执行了2次,并无大碍,不过我个人是无法接受这种擦桌子,看似擦了又没擦干净的感觉的。
这里就要考虑为什么要调换顺序,每个人的情况不同,先说下自己的项目需求,因为项目是保密的,就脑补吧,我尽量说的通俗易懂些。
tabbar页面->home->order->my 3个页面
order页面顶部有4个状态切换。暂且叫 A<B<C<D
需求一。my页面有跳转到order页面A>B>C>D的4个按钮,跳转后加载对应的列表
需求二。order页面点击列表进入详情页,点击左上角返回列表页,顶部保持状态,重新请求列表
需求三。从tabbar进入order页面状态要保持在A上面
我将A>B>C>D状态current存到app.globalData里,order页面onShow中每次获取进行赋值,再请求列表,这样既满足了需求一,又满足了需求二。用onShow而不用onLoad是因为详情页面存在更改列表状态,这样返回列表页要重新请求列表。
在需求三的时候比较让我头疼,假如当前是B的状态,点击 home页面,再点击order,发现还是在B的状态,而我们需要的是A,这是因为app.globalData里存的是B,也就是说要通过onTabItemTap改成A。
上面的2个测试发现并不好用,就在闭目养神的时候终于想出了办法。
在进入home和my页面的时候通过onTabItemTap改变app.globalData里的值,这样在点击order页面一定是A,tabbar 特性就是只有home,order,my这3个页面才会显示,其他页面都不会显示。
有种恍然大悟的感觉,曲线救国,想到马上行动,发现可行,至此完美解决了三条需求。