微信小程序中hidden不生效原因的解決辦法
更新時間：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>
你會發(fā)現(xiàn)hidden沒生效。經(jīng)我實驗發(fā)現(xiàn)hidden元素對塊狀布局才生效，所以這段代碼里導(dǎo)致hidden沒生效的罪魁禍?zhǔn)资莇isplay:flex。把這個去掉就可以了。
如果一定要用flex布局怎么辦？
其實這里想用hidden無非就是想影藏這個布局，display:none也能做到隱藏。這里可以用一個取巧的方法，動態(tài)設(shè)置display屬性，示例如下：
<view hidden="true" style="display:{{hideview ? none : flex}};flex-direction: row;">
<text>text1</text>
<text>text2</text>
</view>
這里的hideview是在對應(yīng)的js里是一個變量，由js來動態(tài)控制。
后話
hidden 隱藏布局，雖然隱藏了，但是還是會占空間。
display:none 隱藏不占據(jù)空間。
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
您可能感興趣的文章:
相關(guān)文章
微信小程序-getUserInfo回調(diào)的實例詳解
這篇文章主要介紹了微信小程序-getUserInfo回調(diào)的實例詳解的相關(guān)資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下2017-10-10
網(wǎng)站上面有這種切換效果...2006-06-06
這篇文章主要介紹了微信小程序 Storage API實例詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了微信小程序 WXDropDownMenu組件詳解及實例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了微信小程序滾動Tab實現(xiàn)左右可滑動切換的相關(guān)資料,這里提供實現(xiàn)實例幫助大家實現(xiàn)這樣的功能，需要的朋友可以參考下2017-08-08
這篇文章主要介紹了微信小程序 flex實現(xiàn)導(dǎo)航實例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要給大家分享js不常見操作運算符總結(jié)，下面文章收i部分js操作運算符得介紹,需要的朋友可以參考一下，希望對你有幫助2021-11-11
這篇文章主要為大家介紹了JavaScript中fetch方法的使用示例全面詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要為大家介紹了JavaScript基礎(chǔ)之函數(shù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>2021-12-12
TypeScript實用技巧?Nominal?Typing名義類型詳解
這篇文章主要為大家介紹了TypeScript實用技巧?Nominal?Typing名義類型詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09