子组件作为页面根节点时，页面生命周期onShow未执行

奔跑的狮子

现象描述

子组件作为页面根节点时，页面的生命周期onShow未执行，问题代码如下。

页面布局代码：

<import name="steps" src="../Steps/stepscanvas1.ux"></import>
<template>
<!-- Only one root node is allowed in template. -->
<!--steps是子组件，作为页面的根节点-->
<steps  class="stepcss" options="{{list2}}" active-color="#007AFF" active="{{active}}" direction="column" >
</steps>
</template>

生命周期代码：

onInit() {
console.info("hello onInit ");
this.$page.setTitleBar({
text: 'Steps',
textColor: '#ffffff',
backgroundColor: '#007DFF',
backgroundOpacity: 0.5,
menu: true
});
},
onShow(options) {
console.info("hello onShow ");
},

行进的蜗牛

问题分析

该问题在华为快应用加载器上会出现，联盟加载器是不存在的，属于兼容性问题。

解决方法

只需要在外层包裹一个div，用div作为根节点即可。

修改后代码如下：

<import name="steps" src="../Steps/stepscanvas1.ux"></import>
<template>
<!-- Only one root node is allowed in template. -->
<div class="container">
<steps  class="stepcss" options="{{list2}}" active-color="#007AFF" active="{{active}}" direction="column" >
</steps>
</div>
</template>

日志输出如下：

09-08 09:31:52.672 I/jsLog   ( 4552): Application onCreate
09-08 09:31:52.686 I/jsLog   ( 4552): hello onInit
09-08 09:31:52.747 I/jsLog   ( 4552): hello onShow