taro判断内容区域的文字是否超出父标签设置的宽度，文字宽度小于父标签的宽度隐藏下拉按钮

妖狐艹你老母 2022-10-09 12:21 76阅读 0赞

**注意初始化阶段需要delay至少500ms再去调用，不然可能访问不到节点**

setTimeout(() => { 
          const query = Taro.createSelectorQuery()
          query.select(".toggle-open").boundingClientRect()
          query.select(".notice-world").boundingClientRect()
          query.select('.check-world-len').boundingClientRect()
          query.exec((res) => { 
            const out1Width = res[0]?.width;
            const out2Width = res[1]?.width;
            const intWidth = res[2]?.width;
            if (intWidth && (intWidth < out1Width || intWidth < out2Width)) { 
              this.setState({ 
                showUpIcon: false
              })
            }
          })
        }, 1000)

{ toggleNotice ?
    <View className='notice-world notice-world-open' ref={ (ref) => {  myInput = ref }}><Text className="check-world-len">{ unescape(noticeWorld)}</Text></View>
    :
    \<View className='toggle-open ' ref={ (ref) => {  myInput = ref }}><Text className="check-world-len">{ unescape(noticeWorld).replace(/\n/, '\n')}</Text></View>
    }
    { showUpIcon && <Image className='notice-img-close notice-img-open' src={ noticeOpenImg} />}

实现效果  
![在这里插入图片描述][2021062418592542.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTc0NjQz_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20210624190015989.png]

[2021062418592542.png]: /images/20221005/7d411caa7e044ae0badbc993011b93e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTc0NjQz_size_16_color_FFFFFF_t_70]: /images/20221005/ba7517e3e5a54d6682d583289540b192.png
[20210624190015989.png]: /images/20221005/39994e868e65456087dd4a8540443762.png