微信小程序 wx:if 与 hidden(隐藏元素)区别

Posted 2021-02-15 暗恋桃埖源

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