码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2019-04-06 16:54:26      阅读:403      评论:0      收藏:0      [点我收藏+]

标签:style   bin   condition   test   .sh   false   页面   .data   WHID   

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(隐藏元素)区别

标签:style   bin   condition   test   .sh   false   页面   .data   WHID   

原文地址:https://www.cnblogs.com/taohuaya/p/10662005.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!