【微信小程序】条件渲染 列表渲染 原来这样用?

简介: WXML 模板语法 - 条件渲染🍊1. wx:if🍋2. 结合 使用 wx:if🍉3. hidden🍓4. wx:if 与 hidden 的对比WXML 模板语法 - 列表渲染🥭1. wx:for🍍2. 手动指定索引和当前项的变量名🥝3. wx:key 的使用

WXML 模板语法 - 条件渲染


🍊1. wx:if


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


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

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


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

js:


Page({
data: {
  type:1
},
})

因为type的值为1,所以:

 

例如:


WXML:

<view wx:if="{{type==1}}">主色调</view>
<view wx:elif="{{type==2}}">普通按钮</view>
<view wx:else>无</view>
<button type="primary" size="mini" wx:if="{{type==1}}">主色调</button>
<button size="mini" wx:if="{{type==2}}">普通按钮</button>

JS和上面的一样


效果:

 

🍋2. 结合  使用 wx:if


如果要 一次性控制多个组件的展示与隐藏 ,可以使用一个  标签将多


个组件包装起来,并在  标签上使用 wx:if 控制属性,示例如下:

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



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


🍉3. hidden


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


<view hidden="{{false}}">hidden</view>


hidden 中  false  表示不隐藏组件


true表示隐藏组件

🍓4. wx:if 与 hidden 的对比


① 运行方式不同


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


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


② 使用建议


频繁切换 时,建议使用 hidden


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


WXML 模板语法 - 列表渲染


🥭1. wx:for


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


<view wx:for="{{arry}}">
索引是:{{index}},item项是:{{item}}
</view>

JS:

Page({
data: {
  arry:['橘子','苹果','香蕉']
}
})

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


效果:

 


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


使用 wx:for-index 可以指定 当前循环项的索引 的变量名


使用 wx:for-item 可以指定 当前项 的变量名


示例代码如下:



🥝3. wx:key 的使用


类似于 Vue 列表渲染中的 :key ,小程序在实现列表渲染时,也建议为渲染出来的列表

项指定唯一的 key 值, 从而 提高渲染的效率 ,示例代码如下:


<view wx:for="{{userList}}" wx:key="id">
{{item.name}}
</view>

JS:

Page({
data: {
 userList:[
   {id:1,name:'热'},
   {id:2,name:'爱'},
   {id:3,name:'编'},
   {id:4,name:'程'},
   {id:5,name:'的'},
   {id:6,name:'小'},
   {id:7,name:'白'},
   {id:8,name:'白'},
 ]
}
})



效果:


相关文章
|
8月前
|
JSON 小程序 数据格式
微信小程序默认的文字内容在左上角怎么办?带你0基础快速了解skyline渲染模式。
本文主要介绍微信小程序开发中遇到的问题及其解决方法。问题通常由微信小程序自带的Skyline渲染模式引起,而非代码编写错误。解决步骤包括:1. 找到全局配置文件app.json;2. 去掉相关配置项;3. 修改后的配置示例。通过这些步骤可以有效解决文字内容顶格或覆盖的问题。文中还提供了进一步了解Skyline渲染模式的链接,帮助开发者深入理解其原理和应用。
797 59
|
JSON 小程序 前端开发
towxml的使用,在微信小程序中快速将markdown格式渲染为wxml文本
本文介绍了在微信小程序中使用`towxml`库将Markdown格式文本渲染为WXML的方法。文章提供了`towxml`的概述、安装步骤、以及如何在小程序中配置和使用`towxml`进行Markdown解析的详细说明和代码示例。
|
小程序 前端开发 索引
微信小程序中的条件渲染和列表渲染,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属性的说明
|
小程序 开发者
【微信小程序】 微信小程序报错不在以下request合法域名列表中
【微信小程序】 微信小程序报错不在以下request合法域名列表中
1989 0
|
10天前
|
消息中间件 人工智能 Java
抖音微信爆款小游戏大全:免费休闲/竞技/益智/PHP+Java全筏开源开发
本文基于2025年最新行业数据,深入解析抖音/微信爆款小游戏的开发逻辑,重点讲解PHP+Java双引擎架构实战,涵盖技术选型、架构设计、性能优化与开源生态,提供完整开源工具链,助力开发者从理论到落地打造高留存、高并发的小游戏产品。
|
1月前
|
小程序 JavaScript API
uni-halo + 微信小程序开发实录:我的第一个作品诞生记
这篇文章介绍了使用uni-halo框架进行微信小程序开发的过程,包括选择该框架的原因、开发目标以及项目配置和部署的步骤。
uni-halo + 微信小程序开发实录:我的第一个作品诞生记
|
7月前
|
自然语言处理 搜索推荐 小程序
微信公众号接口:解锁公众号开发的无限可能
微信公众号接口是微信官方提供的API,支持开发者通过编程与公众号交互,实现自动回复、消息管理、用户管理和数据分析等功能。本文深入探讨接口的定义、类型、优势及应用场景,如智能客服、内容分发、电商闭环等,并介绍开发流程和工具,帮助运营者提升用户体验和效率。未来,随着微信生态的发展,公众号接口将带来更多机遇,如小程序融合、AI应用等。
|
4月前
|
小程序 前端开发 Android开发
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
1037 29
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
|
3月前
|
监控 数据可视化 数据处理
微信养号脚本,全自动插件,AUTOJS开发版
这是一套自动化微信养号工具,包含主脚本`wechat_auto.js`与配置文件`config.json`。主脚本实现自动浏览朋友圈、随机阅读订阅号文章及搜索指定公众号三大功能,支持自定义滚动次数、阅读时长等参数。代码通过随机化操作间隔模拟真实用户行为,具备完善的错误处理和日志记录功能。配套UI模块提供可视化操作界面,可实时监控任务状态与运行日志,便于调整参数设置。控制器部分扩展了批量数据处理能力,如学生信息的增删改查操作,适用于多场景应用。下载地址:https://www.pan38.com/share.php?code=n6cPZ 提取码:8888(仅供学习参考)。
|
11月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
2521 7

热门文章

最新文章