三分钟带你快速学会微信小程序的条件渲染

目录
  • 前言
  • 1.wx:if实现条件渲染
  • 2.block结合wx:if使用
  • 3.hiden实现条件渲染
  • 4. wx:if vs hidden
  • 补充：hidden 和 wx:if 的区别
  • 总结

前言

这篇文章是三分钟学会小程序的条件渲染教程，所谓的条件渲染就是判断是否需要把代码渲染到展示页面上。使用以下三种方式可以实现条件渲染，各自有不同的应用场景，只有熟练掌握其用法，在使用时才能得心应手。

1.wx:if实现条件渲染

在框架中，使用 wx:if="" 来判断是否需要渲染该代码块：

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

如果condition的值为true，就会在页面上渲染出view组件，否则将不会显示该组件。同时还可以结合wx:elif和wx:else来使用，此时可以进行多条件的判断是否渲染该代码。

<view wx:if="{{type===1}}">组件1</view>
<view wx:elif="{{type===2}}">组件2</view>
<view wx:else>组件3</view>

下面做一个演示：在js文件的data中定义一个type，同时在wxml文件中定义三个view组件，根据type的值来决定是否渲染view组件。

此时，改变type的值就可以改变页面渲染的内容。

2.block结合wx:if使用

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

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

注意：不是一个组件，只是一个包裹性的容器，不会在页面上做任何渲染。

下面做一个演示：在<block>中包裹两个view组件，使用wx:if来决定是否需要渲染这两个组件。

此时在页面上渲染了两个view组件，block作为包裹性的容器并没有被渲染。

3.hiden实现条件渲染

在框架中，使用 hidden="" 来控制组件的显示与隐藏。与前面不同的是，hidden组件始终会被渲染，只是简单的控制显示与隐藏。

<view hidden="{{false}}">当条件为true时则会隐藏该元素</view>

下面做一个演示：在js文件中定义一个flag，在wxml文件中使用hidden隐藏view组件。

可以在AppData中改变flag的值从而控制是否隐藏该view组件。

4. wx:if vs hidden

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

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

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

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

所以在使用条件渲染时，要根据不同的应用场景来选择！只有熟练的掌握，才能在小程序开发中提高效率。

补充：hidden 和 wx:if 的区别

  • 被 wx:if 控制的区域，框架有一个局部渲染的过程，会根据控制条件的改变，动态创建或销毁对应的 UI结构。类似Vue中的v-if
  • wx:if 是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
  • 相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。类似Vue中的v-show
  • 总结：wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

总结

到此这篇关于微信小程序条件渲染的文章就介绍到这了,更多相关微信小程序条件渲染内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 微信小程序 条件渲染详解

    1,wx.if 在微信小程序中,小程序是使用wx.if="{{条件}}"来判断是否渲染该代码块,用法如下: <view wx.if="{{条件}}">True</view> 也可以用wx.elif和wx.else来添加一个else块,事例如下: <view wx:if="{{a>1}}"> 1 </view> <view wx:elif="{{a>2}}">

  • 微信小程序如何实现列表渲染和条件渲染

    微信小程序如何实现列表渲染和条件渲染

    目录 概述: 循环渲染: 渲染目标是列表时: 渲染目标为字典时: 总结 概述: 要实现列表渲染我们首先要介绍一下< block标签. 该标签不会再列表中做任何渲染,一般当做容器使用. 我们可以在标签中加入限定元素来实现控制渲染效果. 例如,当我们需要渲染某个限定条件时可以写成: <block wx:if="{{case_length}}"> </block> 而当我们需要循环渲染某个列表时可以写成: <label class="radio&

  • 微信小程序教程系列之视图层的条件渲染（10）

    微信小程序教程系列之视图层的条件渲染（10）

    本教程为大家分享了使用wx:if进行视图层的条件渲染,供大家参考,具体内容如下 使用wx:if进行视图层的条件渲染 示例: wxml:使用view <!--index.wxml--> <button bindtap="EventHandle">按钮</button> <!-- wx:if --> <view wx:if="{{boolean==true}}"> <view class="bg

  • 微信小程序 教程之条件渲染

    系列文章: 微信小程序 教程之WXSS 微信小程序 教程之引用 微信小程序 教程之事件 微信小程序 教程之模板 微信小程序 教程之列表渲染 微信小程序 教程之条件渲染 微信小程序 教程之数据绑定 微信小程序 教程之WXML wx:if 在MINA中,我们用wx:if="{{condition}}"来判断是否需要渲染该代码块: <view wx:if="{{condition}}"> True </view> 也可以用wx:elif和wx:el

  • 三分钟带你快速学会微信小程序的条件渲染

    三分钟带你快速学会微信小程序的条件渲染

    目录 前言 1.wx:if实现条件渲染 2.block结合wx:if使用 3.hiden实现条件渲染 4. wx:if vs hidden 补充:hidden 和 wx:if 的区别 总结 前言 这篇文章是三分钟学会小程序的条件渲染教程,所谓的条件渲染就是判断是否需要把代码渲染到展示页面上.使用以下三种方式可以实现条件渲染,各自有不同的应用场景,只有熟练掌握其用法,在使用时才能得心应手. 1.wx:if实现条件渲染 在框架中,使用 wx:if="" 来判断是否需要渲染该代码块: <

  • 微信小程序富文本渲染引擎的详解

    微信小程序富文本渲染引擎的详解 步骤 把 wxParser 目录放到小程序项目的根目录下 在需要富文本解析的 WXML 内引入 wxParser/index.wxml 在页面 JS 文件内使用 wxParser.parse(options) 方法解析 HTML 内容 在小程序项目根目录的 app.wxss 内引入 wxParser 的默认样式库 wxParser.parse(options) 方法的 options 参数说明 参数名 类型 必填 描述 bind String 是 要绑定的数据名称

  • 微信小程序wxml列表渲染原理解析

    这篇文章主要介绍了微信小程序wxml列表渲染原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 列表渲染存在的意义 以电商为例,我们希望渲染5个商品,而又希望容易改变,我们就要在wxml中动态添加. <view> <block wx:for="{{products}}" wx:for-item="item" wx:key="index"> <view>{{

  • 微信小程序多列表渲染数据开关互不影响的实现

    最近在学习小程序,正好发现一个问题,微信小程序多列表渲染数据开关怎么互不影响,记录一下,分享给大家 <!--pages/list/list.wxml--> <wxs src="../../utils/filter.wxs" module="filter" /> <view class="list"> <view wx:for="{{list}}" wx:key="{{inde

  • 一个小时快速搭建微信小程序的方法步骤

    一个小时快速搭建微信小程序的方法步骤

    「小程序」这个划时代的产品发布快一周了,互联网技术人都在摩拳擦掌,跃跃欲试.可是小程序目前还在内测,首批只发放了 200 个内测资格(泪流满面).本以为没有 AppID 这个月就与小程序无缘了,庆幸的是微信这两天发布了正式版开发者工具,无需内测邀请也可以尝鲜了. 因此也就有了我与「小程序」的初体验,而我的感受只有一个字--爽! 选择哪个「小程序」Demo? 在知名同性交友网站 Github 上,「小程序」的 Demo 不少,但是大多只是简单的 API 演示,有的甚至直接把页面数据写在了 json

  • 一秒学会微信小程序制作table表格

    一秒学会微信小程序制作table表格

    大家都知道微信小程序自身没有提供表格这个组件,但是今天的项目需求又出现了,所以只能模仿一个了. 效果图: 代码挺简单方便的: wxml: <view class='history-table-wrap'> <view class="table"> <view class="tr"> <view class="th th1">日期</view> <view class="t

  • 新手快速入门微信小程序组件库 iView Weapp

    新手快速入门微信小程序组件库 iView Weapp

    介绍 iView Weapp提供了与 iView 一致的 UI 和尽可能相同的接口名称,大幅度降低了学习成本,是一套一套高质量的微信小程序 UI 组件库. 使用步骤 1:首先在github上面下载组件库代码 github 2:下载之后解压 可以看到解压的组件文件内容,选择 dist文件,将 dist 目录拷贝到自己的小程序项目中 3:开始写代码 写页面效果,写一个按钮 在json文件里面引入组件 { "usingComponents": { "i-button":

  • 六分钟带你快速学会react中的useMemo

    目录 概念 useMemo 栗子 筛选偶数 每秒获取时间刷新页面 如何优化 useCallback.React.memo 总结 概念 react 中是通过一次次的 re-render (重新渲染)保持我们的值及时的更新到页面上的,每次重新渲染都是一次快照,可以把它想象成一张张的照片,在某个时刻它应该是什么样子的 useMemo 把创建函数和依赖数组项作为参数传入 useMemo,它仅仅会在数组依赖项中的值改变时才会重新计算值 这种优化有助于避免在每次渲染时都进行高开销的计算 useMemo 的函

  • 一步快速解决微信小程序中textarea层级太高遮挡其他组件

    一步快速解决微信小程序中textarea层级太高遮挡其他组件

    前言 由于小程序中的textarea组件是原生组件,而原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上,造成输入的文字会显示在小程序其他组件上,如下图所示: <view class='bar bottomfix shadow justify-center'> <button class='' formType="submit" type="primary" style='font-size:12pt

  • 三分钟让你快速学会axios在vue项目中的基本用法(推荐!)

    三分钟让你快速学会axios在vue项目中的基本用法(推荐!)

    目录 Axios简介 一.axios是干啥的 二.安装使用 三.Axios请求方式 1.axios可以请求的方法: 2.get请求 3.post请求 4.put和patch请求 5.delete请求 6.并发请求 四.Axios实例 1.创建axios实例 2.axios全局配置 3.axios实例配置 4.axios请求配置 五.拦截器 1.请求拦截器 2.响应拦截器 3.取消拦截 六.错误处理 七.取消请求 结语 提示:本篇详解axios在vue项目中的实例.在使用Vue.js框架开发前端项

随机推荐