专栏首页极客起源微信小程序开发实战(3):条件渲染

微信小程序开发实战(3):条件渲染

小程序的布局支持直接在组件中使用条件渲染属性,该属性的语法如下:

<view wx:if="{{condition}}"> 满足条件 </view>

其中wx:if是一个控制属性,condition是条件表达式。如果condition的值为true,则输出<view>组件中的值。如果有多个条件,和if语句的条件一样,中间可以用&&表示逻辑与,用||表示逻辑或。例如,下面的布局代码的count变量值如果小于4,则输出“数值比较小”,否则什么也不会输出。

<view wx:if="{{count < 4}}"> 数值比较小 </view>

wx:if也可以像if语句一样,使用else if和else。与wx:if对应的是wx:elif和wx:else。下面的布局代码通过对count不同值的判断,会输出不同的字符串。读者可自行设置count变量的值来控制输出结果。

<view>
  <view wx:if="{{count < 4 && count > 0}}"> 数值比较小 </view>
  <view wx:elif="{{count == 100 || count == 300}}"> 固定数值 </view>
  <view wx:else> 其他值 </view>
</view> 

如果在组件中使用wx:if、wx:elif或ex:else,只能控制当前的组件是否起作用。如果要控制多个组件,需要使用<block>、<block>并不是一个组件,它仅仅是一个包装组件,使用方法类似于容器组件,在<block>中可以放置任意多个组件。例如,下面的布局代码使用了3个<block>标签,分别使用了wx:if、wx:elif和wx:else进行控制。如果count等于2,则显示2个view,count等于3,则显示3个view,否则,则显示1个view。

<view class="flex-row">
  <block wx:if="{{count == 2}}">
    <view id="green" class="scroll-view-item bc_green"></view>
    <view id="red" class="scroll-view-item bc_red"></view>
  </block>
  <block wx:elif="{{count == 3}}">
    <view id="green" class="scroll-view-item bc_green"></view>
    <view id="red" class="scroll-view-item bc_red"></view>
    <view id="yellow" class="scroll-view-item bc_yellow"></view>
  </block>
  <block wx:else>
    <view id="green" class="scroll-view-item bc_green"></view>
  </block>
</view>

当count分别为2、3以及其他值时,显示的效果如图1、图2和图3所示。

图1 count == 2的效果

图2 count == 3的效果

图3 count == 5的效果

要注意的是,wx:elif和wx:else需要紧跟在wx:if后面。如果wx:if的条件满足,那么后面的wx:elif和wx:else都不会执行。如果用多个wx:if,只要条件满足,就都会执行。例如,下面的两段布局分别使用了wx:if、wx:elif和两个wx:if。

使用wx:if和wx:elif

<view class="flex-row">
  <block wx:if="{{count < 5}}">
    <view id="green" class="scroll-view-item bc_green"></view>
    <view id="red" class="scroll-view-item bc_red"></view>
  </block>
  <block wx:elif="{{count == 3}}">
    <view id="green" class="scroll-view-item bc_green" ></view>
    <view id="red" class="scroll-view-item bc_red"></view>
    <view id="yellow" class="scroll-view-item bc_yellow"></view>
  </block>
</view>

使用两个wx:if。

<view class="flex-row">
  <block wx:if="{{count < 5}}">
      <view id="green" class="scroll-view-item bc_green"></view>
    <view id="red" class="scroll-view-item bc_red"></view>
  </block>
  <block wx:if="{{count == 3}}">
    <view id="green" class="scroll-view-item bc_green" ></view>
    <view id="red" class="scroll-view-item bc_red"></view>
    <view id="yellow" class="scroll-view-item bc_yellow"></view>
  </block>
</view>

很明显,如果count等于3,count < 5和count == 3两个条件都满足,如果使用wx:elif,只有使用wx:if的<block>会执行,而如果使用两个wx:if,两个<block>都会执行,效果如图4所示。

图4 两个wx:if的效果

本文分享自微信公众号 - 极客起源(geekculture),作者:geekori

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-05-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序开发实战(4):列表渲染

    ‍‍小程序还为我们提供了用于循环的列表渲染。通过wx:for属性,可以对数组进行循环,以便获取数组中的每一个元素,这一过程不需要编写一行JavaScript代码...

    蒙娜丽宁
  • 微信小程序开发实战(1):容器组件

    本文主要介绍了滚动视图组件(scroll-view)的各种常用功能,例如,垂直和水平滚动、滚动事件等,并通过例子代码来演示这些功能的使用方法。

    蒙娜丽宁
  • 小程序开发实战(5):组件复用利器-模板

    根据我们前面讲解的知识,很容易看出,这段布局代码的作用是绘制两行带背景色的方块,效果如图1所示。

    蒙娜丽宁
  • 全栈开发工程师微信小程序-上(中)

    750rpx代表与屏幕等宽,rpx的缩写responsive pixel,这个单位是可以根据屏幕大小进行自适应调整的像素单位.

    达达前端
  • 小程序url传参如何写变量

    蓓蕾心晴
  • android view转Bitmap生成截图的方法

    项目中经常会用到分享的功能,有分享链接也有分享图片,其中分享图片有的需要移动端对屏幕内容进行截取分享,说白了就是将view 转成bitmap 再到图片分享,还有...

    砸漏
  • 微信小程序WXML页面常用语法(讲解+示例)

    官方说明:WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构

    BWH_Steven
  • 小程序组件开发 -- 疫情动态

    之前有很多疫情相关的项目涌现,本弱鸡的作品至今只有一点点star,本着骗star的原则,把一个比较常用的功能组件进行封装,方便各位小程序开发者使用,组件代码放在...

    Kindear
  • 实习入职第二十天:从setRecyclerListener看listView回收机制

    关于这个  setRecyclerListener函数在解决   listView滑出屏幕(包括向上滑出和向下滑出)处理相关UI操作或者释放相关资源,真的很好用...

    wust小吴
  • 微信小程序+和风天气完成天气预报

    花半天时间完成简单的小程序应用。适合小程序初学者。

    极乐君

扫码关注云+社区

领取腾讯云代金券