快捷導(dǎo)航

微信小程序中hidden不生效原因的解決辦法

更新時(shí)間：2017年04月26日 15:50:30 作者：Sunny玄子

這篇文章主要介紹了微信小程序中hidden不生效原因的解決辦法的相關(guān)資料,需要的朋友可以參考下

微信小程序中hidden不生效原因的解決辦法

例如如下布局：

  <view hidden="true" style="display:flex;flex-direction: row;">
    <text>text1</text>
    <text>text2</text>
  </view>

你會(huì)發(fā)現(xiàn)hidden沒生效。經(jīng)我實(shí)驗(yàn)發(fā)現(xiàn)hidden元素對(duì)塊狀布局才生效，所以這段代碼里導(dǎo)致hidden沒生效的罪魁禍?zhǔn)资莇isplay:flex。把這個(gè)去掉就可以了。

如果一定要用flex布局怎么辦？

其實(shí)這里想用hidden無非就是想影藏這個(gè)布局，display:none也能做到隱藏。這里可以用一個(gè)取巧的方法，動(dòng)態(tài)設(shè)置display屬性，示例如下：

  <view hidden="true" style="display:{{hideview ? none : flex}};flex-direction: row;">
    <text>text1</text>
    <text>text2</text>
  </view>

這里的hideview是在對(duì)應(yīng)的js里是一個(gè)變量，由js來動(dòng)態(tài)控制。

后話

hidden 隱藏布局，雖然隱藏了，但是還是會(huì)占空間。

display:none 隱藏不占據(jù)空間。

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章:

相關(guān)文章

微信小程序-getUserInfo回調(diào)的實(shí)例詳解
這篇文章主要介紹了微信小程序-getUserInfo回調(diào)的實(shí)例詳解的相關(guān)資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下
2017-10-10
網(wǎng)站上面有這種切換效果
網(wǎng)站上面有這種切換效果...
2006-06-06
微信小程序 Storage API實(shí)例詳解
這篇文章主要介紹了微信小程序 Storage API實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
2016-10-10
微信小程序 WXDropDownMenu組件詳解及實(shí)例代碼
這篇文章主要介紹了微信小程序 WXDropDownMenu組件詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
2016-10-10
微信小程序滾動(dòng)Tab實(shí)現(xiàn)左右可滑動(dòng)切換
這篇文章主要介紹了微信小程序滾動(dòng)Tab實(shí)現(xiàn)左右可滑動(dòng)切換的相關(guān)資料,這里提供實(shí)現(xiàn)實(shí)例幫助大家實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下
2017-08-08
微信小程序 flex實(shí)現(xiàn)導(dǎo)航實(shí)例詳解
這篇文章主要介紹了微信小程序 flex實(shí)現(xiàn)導(dǎo)航實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
2017-04-04
js不常見操作運(yùn)算符總結(jié)
這篇文章主要給大家分享js不常見操作運(yùn)算符總結(jié)，下面文章收i部分js操作運(yùn)算符得介紹,需要的朋友可以參考一下，希望對(duì)你有幫助
2021-11-11
JavaScript中fetch方法的使用示例全面詳解
這篇文章主要為大家介紹了JavaScript中fetch方法的使用示例全面詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
JavaScript基礎(chǔ)之函數(shù)詳解
這篇文章主要為大家介紹了JavaScript基礎(chǔ)之函數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>
2021-12-12
TypeScript實(shí)用技巧?Nominal?Typing名義類型詳解
這篇文章主要為大家介紹了TypeScript實(shí)用技巧?Nominal?Typing名義類型詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09