主页面初次进入 子组件pageLifetimes中show方法没有执行

问题

子组件 show 初次进入页面不触发

  pageLifetimes: {
    show: function () {
      const cid = this.data.cid;
      // 展示曝光埋点
      lx.moduleView('b_qcs_wi3g62ng_mv', {}, { cid });
      console.error("xsz old UI  pageLifetimes show 中埋点执行了 ")
    },
  },

使用子组件的地方, 被几个父组件传入的参数控制着显示

    <!-- 定位授权样式 -->
  <block wx:if="{{(!locAuthed||!locationEnabled) && !hasUnderwayOrder}}">
    <location-guide locationEnabled="{{locationEnabled}}" cid="{{cid}}" style="z-index: 1" />
  </block>

在父组件写如下测试代码

  attached() {
    let res = (!this.properties.locAuthed||!this.properties.locationEnabled) && !this.properties.hasUnderwayOrder
    console.error('xsz content-area 是否打开', res)
    let t = 500
    setTimeout(()=>{
      let res = (!this.properties.locAuthed||!this.properties.locationEnabled) && !this.properties.hasUnderwayOrder
      console.error(`xsz content-area setTimeout ${t}ms content-area 是否打开`, res)
    }, t)
}

一开始是 res 是false

500ms 已经是 true 了

所以是。。主页面第一次加载时调用onShow 时 应该会 调用子组件 的 PageLifetimes 的show,却发现 子组件因 wxif的控制还没有挂载呢,就不管不执行埋点功能了。。。。。。

解决方案

1 改用hidden 属性

官方文档的介绍

wx:if vs hidden

因为 wx:if 之中的模板也可能包含数据绑定,所以当 wx:if
的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。

相比之下,hidden 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。

一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden
更好,如果在运行时条件不大可能改变则 wx:if 较好。

<location-guide hidden="{{locAuthed && locationEnabled}}"
                locationEnabled="{{locationEnabled}}"
                style="z-index: 1"
                cid="{{cid}}"
/>

2 埋点触发写在 attached

  lifetimes: {
    attached() {
		// 埋点代码
    },
  },

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值