条件渲染

wx:if

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

<view wx:if="{{condition}}"> True </view>

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

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

block wx:if

因为 wx:if 是一个控制属性,需要将它添加到一个标签上。但是如果我们想一次性判断多个组件标签,我们可以使用一个 <block/> 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

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

wx:if vs hidden

因为 wx:if 之中的模板也可能包含数据绑定,所有当 wx:if 的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。

相比之下,hidden 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。

一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。

微信小程序-视图条件渲染的更多相关文章

  1. 微信小程序:条件渲染wx:if和hidden

    一.条件渲染:wx:if,wx:elif,wx:else 花括号中的true或false可以改成变量从而来动态显示. 二.hidden 只显示hidden2 当标签不是频繁切换显示(控制是否渲染到页面 ...

  2. 微信小程序-视图列表渲染

    wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件. 默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item <view ...

  3. 微信小程序-if条件渲染

    #index.wxml <view>今天吃啥</view> <view wx:if="{{condition==1}}"> 饺子 </vi ...

  4. 微信小程序的页面渲染(if/for)

    下面,粗略的介绍一下微信小程序的条件渲染.列表渲染.数据绑定等,详细的内容大家可以去看微信小程序的API,在此只做简单描述,希望能帮助到大家 条件渲染 <!--wxml--> <vi ...

  5. 微信小程序视图层介绍及用法

    一. 视图层 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 1.1. 数据绑定 1.1.1. 普通写法 <vi ...

  6. 微信小程序富文本渲染组件html2wxml及html2wxml代码块格式化在ios下字体过大问题

    1.组件使用: 之前微信小程序的富文本渲染组件用的wxParse,对普通富文本确实可以,但是对于代码格式pre标签则无法使用. 下面这个html2wxml很不错,可以支持代码高亮. 详细文档:http ...

  7. 如何在微信小程序的模板渲染中使用JS?

    在微信小程序中使用模板渲染时,可能需要用JS对其进行处理. <view class="price text-red text-lg"> <!-- 价格保留两位小数 ...

  8. 微信小程序-视图

    数据绑定 <!--wxml--> <view> {{message}} </view> // page.js Page({ data: { message: 'He ...

  9. 微信小程序转义解析渲染html

    今天开发小程序时,想调用商品详情字段,发现大部分是用编辑器编辑的html原生标签,无法在小程序直接使用. 后面自己使用正则和字符串替换,效果也不佳. 最后在网上找到了wx-mina-html-view ...

随机推荐

  1. SQL性能优化

    引言: 以前在面试的过程中,总有面试官问道:你做过sql性能优化吗?对此,我的答复是没有.一次没有不是自己的错误,两次也不是,但如果是多次呢?今天痛下决心,把有关sql性能优化的相关知识总结一下,以便 ...

  2. 在 shell 脚本获取 ip、数字转换等网络操作

    在 shell 脚本获取 ip.数字转换等网络操作 ip 和数字的相互转换 ip转换为数字 :: function ip2num() { local ip=$1 local a=$(echo $ip ...

  3. Linux 下应用程序最大打开文件数的理解和修改

    运行在Linux系统上的Java程序运行了一段时间后出现"Too many open files"的异常情况. 这种情况常见于高并发访问文件系统,多线程网络连接等场景.程序经常访问 ...

  4. Docker的镜像

    镜像是容器的运行基础,容器是镜像运行后台的形态 镜像的概念 镜像是一个包含程序运行必要依赖环境和代码的只读文件,它采用分层的文件系统,将每一次改变以读写层的形式增加到原来的只读文件上 镜像的系统结构 ...

  5. iOS计算完整文字高度(适应iOS 10)

    动态计算文字的高度:(切记LineSapcing>=2,不然会显示不全) +(CGSize) boundingALLRectWithSize:(NSString*) txt Font:(UIFo ...

  6. 详解JS跨域问题

    什么是跨域? 概念:只要协议.域名.端口有任何一个不同,都被当作是不同的域.             JavaScript   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...

  7. Windows XP 新增API函数列表

    SetFileShortNameConvertFiberTothreadCreateFiberExDuplicateEncryptionInfoFileEnumGeoInfoProcEnumSyste ...

  8. Markdown 是什么

    tags: Markdown tags && syngx ###Markdown 是什么Markdown 是一种轻量级标记语言,创始人为约翰·格鲁伯(John Gruber).它允许人 ...

  9. 使用Docker构建redis集群--最靠谱的版本

    1集群结构说明 集群中有三个主节点,三个从节点,一共六个结点.因此要构建六个redis的docker容器.在宿主机中将这六个独立的redis结点关联成一个redis集群.需要用到官方提供的ruby脚本 ...

  10. 编写ros串口节点,使用官方serial包

    参考http://www.roswiki.com/read.php?tid=557&fid=39 1.通过sudo apt-get install ros-<distro>-ser ...