景象形容:
通过router.push接口跳转到快利用的B页面,当B页面只是援用一个自定义组件XX的时候,B页面的onShow生命周期无奈触发。如下图所示:
代码如下:
B页面代码:
<import name="listone" src="./aa.ux"></import><template> <!-- template里只能有一个根节点 --><listone></listone></template><script> import prompt from '@system.prompt' export default { private: { }, onInit: function () { }, onShow() { console.log('我显示了我显示了我显示了我显示了'); prompt.showToast({ message: '我显示了我显示了我显示了我显示了' }) }, //无奈触发 }</script> <style> .demo-page { flex-direction: column; justify-content: center; align-items: center; } .title { font-size: 40px; text-align: center; }</style>
自定义组件aa.ux:
<template> <div class="container"> <text>天气不错啊</text> <text>天气不错啊</text> <text>天气不错啊</text> <text>天气不错啊</text> </div></template><style> .container { flex-direction: column; justify-content: center;align-items: center;background-color: #00fa9a; }</style><script> module.exports = { data: { }, onInit() { }, }</script>
问题剖析:
快利用引擎框架决定了自定义组件作为B页面的根节点时,B页面的onShow生命周期是无奈触发的,然而子组件本身的onShow能够触发。
解决方案:
在B页面的子组件里面加个div组件作为根节点,而不是把自定义组件作为根节点,这样B页面的onShow生命周期就能够触发了。
B页面批改后代码如下(见红色局部):
<import name="listone" src="./aa.ux"></import><template> <!-- template里只能有一个根节点 --> <div> <listone></listone> </div> </template><script> import prompt from '@system.prompt' export default { private: { }, onInit: function () { }, onShow() { console.log('我显示了我显示了我显示了我显示了'); prompt.showToast({ message: '我显示了我显示了我显示了我显示了' }) }, }</script> <style> .demo-page { flex-direction: column; justify-content: center; align-items: center; } .title { font-size: 40px; text-align: center; }</style>
批改后代码如下图所示:
欲了解更多详情,请参见:
快利用生命周期:
https://developer.huawei.com/...
原文链接:https://developer.huawei.com/...
原作者:Mayism