Solution to unable to obtain component node information in taro

I want to try taro in the recent small program revision, and share some of the pits.

Business scene:

The design draft is as follows. The top is a list of pictures. We are wanted to wrap the outermost layer with scroll-view, and the bottom is a tabbar. Due to some other business requirements, this tabbar is customized by us. At this time, we encountered a problem.

 

The scroll-view in the applet needs to be given a fixed height, but we cannot write 100%

The simplest formula

scroll-view = page available height-tabbar height

 

Regarding getting the height of the component, we naturally think of wx.createSelectorQuery(). The same method is also encapsulated in taro called Taro.createSelectorQuery()

 

But after using this method, it is not easy to get the node information.

But the name written in the document is so used, strange!

After searching for a long time, I finally found the answer link under taro official issues.  

createSelectorQuery Can only choose built-in components? Black question mark face, why didn't you say it earlier! In my heart, 10,000 horses and mud horses have run through, but the curse needs to be written. The official said that the custom component needs to pass this.$scope in, and the custom component can only get the node information in the component, so we need If you get the node information in the custom component outside the component, you need to put it in redux.

In most cases, it’s okay. When I was happy, taro gave me another shit 

I want to get the node information of this class named .m-clfy. The code in componentDidMount is the same, and it’s not possible to write it in render. Then let’s try to make this scroll-view display under any circumstances after judgment.

 In this way, the node information of .m-clfy can be obtained normally, but our business logic still needs it, so in the end, only the class name can be used to control the display of the scroll-view of .m-clfy

Guess you like

Origin blog.csdn.net/promiseCao/article/details/88536655