快捷導(dǎo)航

微信小程序中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)文章

JS前端設(shè)計模式之發(fā)布訂閱模式詳解
這篇文章主要為大家介紹了JS前端設(shè)計模式之發(fā)布訂閱模式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
微信小程序 video詳解及簡單實例
這篇文章主要介紹了微信小程序 video詳解及簡單實例的相關(guān)資料,需要的朋友可以參考下
2017-01-01
前端JavaScript多數(shù)元素的算法詳解
這篇文章主要介紹了前端JavaScript多數(shù)元素的算法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
微信小程序 less文件編譯成wxss文件實現(xiàn)辦法
這篇文章主要介紹了微信小程序 less文件編譯成微信小程序wxss文件實現(xiàn)辦法的相關(guān)資料,這里給出具體實現(xiàn)方法，需要的朋友可以參考下
2016-12-12
JavaScript專題之underscore防抖實例學(xué)習(xí)
這篇文章主要為大家介紹了JavaScript專題之underscore防抖實例學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
ChatGPT在前端領(lǐng)域的初步探索
這篇文章主要為大家介紹了ChatGPT在前端領(lǐng)域的初步探索，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
js前端架構(gòu)Git?commit提交規(guī)范
這篇文章主要為大家介紹了前端架構(gòu)Git?commit提交規(guī)范示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
JavaScript單例模式能不能去實例只留單原理解析
這篇文章主要為大家介紹了JavaScript單例模式能不能去實例只留單原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
微信小程序后臺解密用戶數(shù)據(jù)實例詳解
這篇文章主要介紹了微信小程序后臺解密用戶數(shù)據(jù)實例詳解的相關(guān)資料,需要的朋友可以參考下
2017-06-06
ECharts Canvas渲染在SVG合理運(yùn)用
這篇文章主要為大家介紹了ECharts Canvas渲染在SVG合理運(yùn)用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12