【小程序】条件渲染与列表渲染

简介: 【小程序】条件渲染与列表渲染

条件渲染

1. wx:if

在小程序中,使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块:


53fbb45d4a8b41e693e7c54774df502a.png


也可以用 wx:elif 和 wx:else 来添加 else 判断:

8b2d8473c9e24cc593bc88a0df54ef20.png

2. 结合 <block> 使用 wx:if


如果要一次性控制多个组件的展示与隐藏,可以使用一个 <block></block> 标签将多个组件包装起

来,并在<block> 标签上使用 wx:if 控制属性,示例如下:

800b649f4c1644659038e18ed6bff072.png

注意: <block> 并不是一个组件,它只是一个包裹性质的容器,不会在页面中做任何渲染。

3. hidden

在小程序中,直接使用 hidden="{{ condition }}" 也能控制元素的显示与隐藏:

6d5405708045424db1b8b8c9e8122838.png

4. wx:if 与 hidden 的对比

运行方式不同


wx:if 以动态创建和移除元素的方式,控制元素的展示与隐藏  


hidden 以切换样式的方式(display: none/block;),控制元素的显示与隐藏


使用建议  


频繁切换时,建议使用 hidden  


控制条件复杂时,建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换


列表渲染

1. wx:for

通过 wx:for 可以根据指定的数组,循环渲染重复的组件结构,语法示例如下:

9a968b0eb5934ed9b1b2568522b4e6e6.png

默认情况下,当前循环项的索引用 index 表示;当前循环项用 item 表示。

2. 手动指定索引和当前项的变量名*

使用 wx:for-index 可以指定当前循环项的索引的变量名  使用 wx:for-item 可以指定当前项的变量名 示例代码如下:


4661a0574965435e85d80b7cd36e31a1.png


3. wx:key 的使用

类似于 Vue 列表渲染中的 :key,小程序在实现列表渲染时,也建议为渲染出来的列表项指定唯一的 key 值,从而提高渲染的效率,示例代码如下:


8bbc1b1e7ae24f55a79f602386430b85.png

相关文章
|
4月前
|
小程序 API 数据库
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
85 0
|
2月前
|
JSON 小程序 前端开发
towxml的使用,在微信小程序中快速将markdown格式渲染为wxml文本
本文介绍了在微信小程序中使用`towxml`库将Markdown格式文本渲染为WXML的方法。文章提供了`towxml`的概述、安装步骤、以及如何在小程序中配置和使用`towxml`进行Markdown解析的详细说明和代码示例。
|
2月前
|
小程序 前端开发 索引
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
这篇文章介绍了微信小程序中条件渲染和列表渲染的使用方法,包括wx:if、wx:elif、wx:else、wx:for、wx:key以及block标记和hidden属性的使用。
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
|
4月前
|
小程序 开发者
【微信小程序】 微信小程序报错不在以下request合法域名列表中
【微信小程序】 微信小程序报错不在以下request合法域名列表中
952 0
|
4月前
|
小程序 前端开发
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
257 0
|
4月前
|
小程序
【微信小程序-原生开发】列表 - 拖拽排序(官方组件 movable-area 和 movable-view 的用法)
【微信小程序-原生开发】列表 - 拖拽排序(官方组件 movable-area 和 movable-view 的用法)
428 0
|
4月前
|
小程序 数据库
【微信小程序-原生开发】实用教程15 - 列表的排序、搜索(含云数据库常用查询条件的使用方法,t-search 组件的使用)
【微信小程序-原生开发】实用教程15 - 列表的排序、搜索(含云数据库常用查询条件的使用方法,t-search 组件的使用)
117 0
|
4月前
|
JSON 小程序 数据库
【微信小程序-原生开发】实用教程14 - 列表的分页加载,触底加载更多(含无更多数据的提醒和显示,自定义组件)
【微信小程序-原生开发】实用教程14 - 列表的分页加载,触底加载更多(含无更多数据的提醒和显示,自定义组件)
129 0
|
4月前
|
小程序 JavaScript 前端开发
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
153 0
|
6月前
|
小程序 算法 UED
【专栏】小程序图片合成就绪渲染的转变,从异步并发渲染到同步阻塞渲染
【4月更文挑战第29天】本文探讨了小程序图片合成就绪渲染的转变,从异步并发渲染(提高效率,并发处理但可能导致资源竞争和顺序难控)到同步阻塞渲染(顺序可控,资源管理更精细,可能引起界面卡顿)。同步阻塞通过任务队列和阻塞机制确保顺序,解决并发问题。注意避免长时间阻塞,及时释放资源,优化任务效率,并结合异步处理。选择合适方案取决于实际需求,以平衡效率与一致性。
93 1

热门文章

最新文章

下一篇
无影云桌面