taro中无法获取组件节点信息解决办法

最近小程序改版想尝试下taro,其中的一些坑也分享一下

业务场景:

设计稿如下,上面是一个图片列表我们被想用scroll-view包裹在最外层,下面是个tabbar,由于其他的一些业务需求这个tabbar是我们自定义,这个时候就遇到一个问题。

taro中无法获取组件节点信息解决办法_第1张图片

 

小程序中的scroll-view需要给固定高度,但是我们不能写100%

最简单的公式

scroll-view = 页面可用高度 - tabbar高度

 

关于获取组件的高度,我们很自然的想到wx.createSelectorQuery(),taro中也封装了一样的方法就叫Taro.createSelectorQuery()

 

taro中无法获取组件节点信息解决办法_第2张图片

但是用这个方法之后发现不好使,获取不到节点信息

taro中无法获取组件节点信息解决办法_第3张图片

但是文档里命名写的是这么用的呀,奇怪!

找了好久终于在taro官方issues下面找到了答案  链接

taro中无法获取组件节点信息解决办法_第4张图片

createSelectorQuery 只能选择内置组件 ?黑人问号脸 你怎么不早说啊!心里一万匹草泥马奔过  但是骂归骂需求还得写呀,官方说自定义组件需要把this.$scope穿进去,而且自定义组件只能在该组件中才能获取到节点信息,所以我们需要在组件外得到自定义组件中的节点信息的话需要放入redux中。

taro中无法获取组件节点信息解决办法_第5张图片

这样做大部分情况下是没毛病了,正当我开心的时候,taro又喂了我一口屎 

taro中无法获取组件节点信息解决办法_第6张图片

我想获取这个类名叫.m-clfy的节点信息,componentDidMount中的代码是一样的,render里面这样写就不行,那我们试试经过判断让这个scroll-view在任何情况下都显示

taro中无法获取组件节点信息解决办法_第7张图片

 这样就可以正常获取到.m-clfy的节点信息了,但是我们的业务逻辑还是需要啊,所以最后只能用类名来控制.m-clfy这个scroll-view的显示了

taro中无法获取组件节点信息解决办法_第8张图片

你可能感兴趣的:(小程序笔记)