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