<template>
<view>
<view style="padding-bottom: 50px;">
<home v-if="PageCur=='home'"></home>
<ticket v-if="PageCur=='basics'"></ticket>
<message v-if="PageCur=='component'"></message>
<chat v-if="PageCur=='plugin'"></chat>
</view>
<view class="cu-bar tabbar bg-white shadow foot">
<view class="action" @click="NavChange" data-cur="home">
<view class='cuIcon-cu-image'>
<image :src="'/static/tabbar/home.gif'"></image>
</view>
<view :class="PageCur=='home'?'text-green':'text-gray'">首页</view>
</view>
<view class="action" @click="NavChange" data-cur="component">
<view class='cuIcon-cu-image'>
<image :src="'/static/tabbar/component.png'"></image>
</view>
<view :class="PageCur=='component'?'text-green':'text-gray'">最新消息</view>
</view>
<view class="action" @click="NavChange" data-cur="basics">
<view class='cuIcon-cu-image'>
<image :src="'/static/tabbar/basics.png'"></image>
</view>
<view :class="PageCur=='basics'?'text-green':'text-gray'">优惠券</view>
</view>
<view class="action" @click="NavChange" data-cur="plugin">
<view class='cuIcon-cu-image'>
<image :src="'/static/tabbar/plugin.png'"></image>
</view>
<view :class="PageCur=='plugin'?'text-green':'text-gray'">在线聊天</view>
</view>
</view>
</view>
</template>
- 发布:2021-01-12 11:18
- 更新:2024-03-01 12:38
- 阅读:2041
【报Bug】子组件的onShow,onLoad,onHide,onReady等生命周期事件在HBuilderX内置Web浏览器和最新Chrome,Edge浏览器都不会执行
产品分类: uniapp/H5
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: Windows 10 1909
HBuilderX类型: 正式
HBuilderX版本号: 3.0.5
浏览器平台: Chrome
项目创建方式: HBuilderX
示例代码:
操作步骤:
直接打开页面或者通过v-if来显示隐藏页面都不会触发子组件message的生命周期事件
直接打开页面或者通过v-if来显示隐藏页面都不会触发子组件message的生命周期事件
预期结果:
子组件可以正常触发生命周期事件onShow,onLoad,onHide,onReady
子组件可以正常触发生命周期事件onShow,onLoad,onHide,onReady
实际结果:
没有正常触发生命周期事件onShow,onLoad,onHide,onReady
没有正常触发生命周期事件onShow,onLoad,onHide,onReady
bug描述:
- 子组件的onShow,onLoad,onHide,onReady等生命周期事件在HBuilderX内置Web浏览器和最新Chrome,Edge浏览器都不会执行。
- 子组件的onReady事件在微信内置浏览器中会执行,但onShow,onLoad,onHide不会执行。
4 个回复
f***@163.com (作者)
后续发现子组件中使用Vue组件的生命周期created,mounted,destroyed方法都是可以执行的。
f***@163.com (作者)
https://uniapp.dcloud.net.cn/collocation/frame/lifecycle?id=%E7%BB%84%E4%BB%B6%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F
组件生命周期文档中已经有参考。
SS112233
请问怎么解决的
1***@qq.com
挖坟可耻,文档说了组件有组件的生命周期,页面有页面的生命周期,跟vue不同
2022-12-22 11:23
1***@qq.com
https://uniapp.dcloud.net.cn/tutorial/page.html#componentlifecycle
2022-12-22 11:24
SS112233
回复 1***@qq.com: 谢谢,麻烦了
2022-12-22 14:56
aspack001 - 老程序猿
https://uniapp.dcloud.net.cn/tutorial/page.html#componentlifecycle
uniapp中组件生命周期没有onRead,可以用mounted组件生命周期
uni-app 组件支持的生命周期,与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期:
函数名 说明 平台差异说明 最低版本
beforeCreate 在实例初始化之前被调用。详见
created 在实例创建完成后被立即调用。详见
beforeMount 在挂载开始之前被调用。详见
mounted 挂载到实例上去之后调用。详见 注意:此处并不能确定子组件被全部挂载,如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
beforeUpdate 数据更新时调用,发生在虚拟 DOM 打补丁之前。详见 仅H5平台支持
updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。详见 仅H5平台支持
beforeDestroy 实例销毁之前调用。在这一步,实例仍然完全可用。详见
destroyed Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。详见