微信小程序wx:if的使用 小程序wx:if和hidden的区别-手机电子游戏网址

小程序开发

2021-06-16

  我们在开发小程序项目的时候,经常会用到wx:if属性,在框架中,使用wx:if=""来判断是否需要渲染该代码块,非常的实用,而对于刚接触小程序开发项目的开发者来说,可能还不是很了解这个属性,以及它和hidden有什么区别,今天一起和厦门在乎科技来了解一下吧。

微信小程序wx:if的使用 小程序wx:if和hidden的区别


  微信小程序wx:if的使用:

  在框架中,我们用wx:if="{{condition}}"来判断是否需要渲染该代码块:

         true

  也可以用wx:elif和wx:else来添加一个else块:

         1

         2

         3

  block wx:if

  注意:并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。

  实例:

  wxml:使用view

        

        

        

        

        

        

        

        

        

  wxss:

  /**index.wxss**/

  .bg_black { height: 200rpx; background: lightskyblue; } .bg_red { height: 200rpx; background: lightpink; }

  js:

  // index.js

  page({ data: { boolean:false }, eventhandle: function(){ var bol = this.data.boolean; this.setdata({ boolean: !bol }) } })

微信小程序wx:if的使用 小程序wx:if和hidden的区别


  小程序wx:if和hidden的区别:

  1.wx:if 是遇 true 显示,hidden 是遇 false 显示。

  2.wx:if 在隐藏的时候不渲染,而 hidden 在隐藏时仍然渲染,只是不呈现。

  3.所以如果频繁切换的话,用 wx:if 将会消耗更多资源,因为每次呈现的时候他都会渲染,每次隐藏的时候,他都会销毁。

  4.如果切换并不频繁的话,用 wx:if 相对来说较好些,因为它会避免初始就一下渲染那么多。

微信小程序wx:if的使用 小程序wx:if和hidden的区别


  以上就是今天为大家带来的关于“微信小程序wx:if的使用 小程序wx:if和hidden的区别”全部内容,这里我们要注意的是,因为 wx:if 是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个标签将多个组件包装起来,并在上边使用 wx:if 控制属性,想要了解更多关于小程序开发的内容,欢迎关注厦门在乎科技-专注小程序、app、网站开发

即刻联系「在乎科技」专业项目经理为您提供产品咨询和项目报价!

contact us

联系手机电子游戏网址

联系电话:

131-6399-9993

电子邮箱:

公司地址:

厦门市思明区湖滨南路388号国贸大厦34d单元

公司地址