微信小程序学习笔记 ( 小程序页面学习八 WXML-条件渲染基本食用方法)

最新推荐文章于 2021-07-08 13:36:38 发布

cdhjava

最新推荐文章于 2021-07-08 13:36:38 发布

阅读量515

点赞数

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.csdn.net/cdhjava/article/details/80501525

版权

微信小程序专栏收录该内容

14 篇文章 0 订阅

订阅专栏

视图层

  框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。
  将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。
  WXML(WeiXin Markup language) 用于描述页面的结构。
  WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
  WXSS(WeiXin Style Sheet) 用于描述页面的样式。
  组件(Component)是视图的基本组成单元。

条件渲染

在微信小程序框架中, 我们使用 wx:if="{{boolean}}" 来进行判断是否要渲染该代码块, 当然也有我们习惯的的 wx:elif="{{boolean}}, wx:else
接下来让我们来做下代码演示.

wx:if使用

index.wxml

<view>
    <text class='title'>条件渲染</text>
    <switch checked='{{wxif.flag}}' bindtap='switchClick'/>
    <text class='block'>switch的选中情况</text>
    <text wx:if="{{wxif.flag}}">选中</text>
    <text wx:else>未选中</text>
</view>

index.js

data: {
    "条件渲染专用":"",
    wxif:{
      flag : true,
    }
},
switchClick :function(){
    this.setData({
      'wxif.flag': !this.data.wxif.flag
    });
}

运行效果
条件渲染

block wx:if

这没什么好说的, 我们在学wx:for的时候也用过给个例子

<view>
    <text class='title'>条件渲染</text>
    <switch checked='{{wxif.flag}}' bindtap='switchClick' />
    <text class='block'>switch的选中情况</text>
    <block wx:if="{{wxif.flag}}">
        <text class='test'>选中</text>
    </block>
    <block wx:else>
        <text class='test'>未选中</text>
    </block>
</view>

运行效果
条件渲染

wx:if 与 hidden 的区别

因为 wx:if 之中的模板也可能包含数据绑定，所有当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。
同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。
一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

这个我也不多说什么了, 总的来说若是切换频繁,而且希望实时性更高用hide好, 切换少而且实时性低,用wx:if好, 但并不是说wx:if不行只是说他更合适用于低切换的地方