【微信小程序】 wx:if 與 hidden(隱藏元素)區別
阿新 • • 發佈:2019-04-06
clas true dev color dde com code span ini
wx:if 與 hidden 都可以控制微信小程序中元素的顯示與否。
區別:
wx:if 是遇 true 顯示,hidden 是遇 false 顯示。
wx:if 在隱藏的時候不渲染,而 hidden 在隱藏時仍然渲染,只是不呈現。
所以如果頻繁切換的話,用 wx:if 將會消耗更多資源,因為每次呈現的時候他都會渲染,每次隱藏的時候,他都會銷毀。
如果切換並不頻繁的話,用 wx:if 相對來說較好些,因為它會避免初始就一下渲染那麽多。
wxml:
<view> <text>pages/testmodule/testmodule.wxml</text> <view wx:if="{{showif}}">wx:if測試</view> <view hidden=‘{{showhidden}}‘>hidden顯示隱藏測試</view> <button bindtap=‘handleIf‘>改變if</button> <button bindtap=‘handleHidden‘>改變hidden</button> </view>
js:
Page({ /** * 頁面的初始數據*/ data: { showif: true, showhidden: false }, handleIf(){ this.setData({ showif: !this.data.showif }); }, handleHidden(){ this.setData({ showhidden: !this.data.showhidden }); } )}
官網文檔:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/conditional.html
【微信小程序】 wx:if 與 hidden(隱藏元素)區別