微信小程序中hidden不生效原因的解決辦法
微信小程序中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沒生效的罪魁禍首是display: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)文章
微信小程序 less文件編譯成wxss文件實現(xiàn)辦法
這篇文章主要介紹了微信小程序 less文件編譯成微信小程序wxss文件實現(xiàn)辦法的相關(guān)資料,這里給出具體實現(xiàn)方法,需要的朋友可以參考下2016-12-12JavaScript專題之underscore防抖實例學(xué)習(xí)
這篇文章主要為大家介紹了JavaScript專題之underscore防抖實例學(xué)習(xí),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-09-09js前端架構(gòu)Git?commit提交規(guī)范
這篇文章主要為大家介紹了前端架構(gòu)Git?commit提交規(guī)范示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07