zoukankan      html  css  js  c++  java
  • 微信小程序组件取不到属性值?可能是生命周期的原因

    在学习和使用小程序的过程中遇到了一个坑,情况是这样的。

    首先有个小程序页面 PageA,在 PageA 里使用一个组件 componentA ,这个组件的作用是推荐信息,类似于一个文本卡片的功能,推荐组件中有一个按钮,可以点击切换下一条,总共最多切换十条。组件 componentA 中需要一个数组属性 dataList ,然后就是组件内部实现了。

    组件内部实现就是,维护了一个当前展示信息的对象 showData 和 一个当前展示数据下标 showIndex,当点击切换下一个的时候,会进行 showIndex++,然后我用了组件的 observers 属性来进行监听 showIndex ,当 showIndex 改变的时候,就从 dataList 中取对应下标的数据赋值给 showData 。

    问题来了,初始的 showData 为空对象,当组件拿到dataList的时候肯定得进行初始赋值,其次是每次点击下一个切换 showIndex 的时候也会改变 dataList 。于是我就把 showIndex 的初始值赋值为 -1, 在小程序生命周期 lifetimes 里,使用 attached 生命周期,当时想的是组件进行到 attached 生命周期时一切的数据准备肯定都已经好了。于是就在 attched 生命周期中将 showIndex 赋予了初值 0,在  observes 里监听 showIndex 变化,当 dataList[showIndex] 存在时,就赋值最新的的值给 showData,若 dataList[showIndex] 不存在时就将表示数据已经展示完了,就把卡片隐藏。

    看到这里是不是一切都没有问题?

    但是问题来了,在初次加载的时候,推荐卡片组件消失不见了,并且也不出来。

    然后就打断点开始排查,结果发现在 observes 里,首次触发 showIndex 监听时,showIndex 为 0 ,但是 dataList 为空数组!!

    这是为什么呢?? 我是在 attched 生命周期里才赋值 showIndex 的,这时 dataList 按理来说应该是接收好了,怎么会是空数组呢?

    于是我就查阅微信小程序公众文档里的组件生命周期里找到答案。

    原来小程序的生命周期不仅仅是有 小程序指南 里的那三种基础生命周期(attached、moved、detached),还有 created、ready 和 error等三种,共计六种生命周期。

    于是我试着将 attached 生命周期改为了 ready 试了一下,就成功了!!!纠结了好一会儿,作为初学者还真的是有点摸不着头脑,所以记录一下,以备查询。

  • 相关阅读:
    【模板】Sparse-Table
    UVa 11235 Frequent values
    【模板】树状数组
    UVa 1428 Ping pong
    数学技巧
    UVa 11300 Spreading the Wealth
    UVa 11729 Commando War
    UVa 11292 Dragon of Loowater
    POJ 3627 Bookshelf
    POJ 1056 IMMEDIATE DECODABILITY
  • 原文地址:https://www.cnblogs.com/LeoXnote/p/14790591.html
Copyright © 2011-2022 走看看