uni-app入门:WXML列表渲染与条件渲染
1.列表渲染
1.1wx:for
1.2wx:key
2.条件渲染
2.1wx:if
2.2 hidden
正文
WXML
全称:wexin markup language
,微信标签语言,可以理解为web中的html,今天来讲一下列表渲染,通过几个小案例掌握基本的使用,以下均以index页面进行讲解。
1.列表渲染
1.1wx:for
uniapp中使用wx:for进行列表渲染数据展示,其中默认索引形参为index,索引对应的值的形参默认为item。现自定义数组,然后进行遍历渲染展示。
index.js:
Page({data: {arr:[1,2,3,4,5]}
})
index.wxml:
<view wx:for="{{arr}}">索引index:{{index}},值:{{item}}</view>
展示数据如下:
wx:for中的索引项和索引值的形参默认是index、item,是否可以进行自定义,答案是肯定的,现在自定义customIndex、customItem对默认的形参进行修改,需要借助对应的属性:wx:for-index、wx:for-item来实现。上面的数组列表遍历就就可以修改成如下:
index.wxml中:
<view wx:for="{{arr}}" wx:for-index="customIndex" wx:for-item="customItem">
索引index:{{customIndex}},值:{{customItem}}</view>
展示效果同上:
1.2wx:key
上面的列表渲染实现之后,细心的同学可能会在控制台中看到如下警告信息:
警告的大概意思是需要使用wx:key提高列表渲染的性能,使用wx:key指定每项的唯一标识。至于wx:key的数值一般为列表中唯一的字段值。
上面的案例customIndex是每一项的唯一标识,所以可以指定wx:key的值为customIndex。修改后的index.wxml如下:
<view wx:for="{{arr}}" wx:for-index="customIndex" wx:for-item="customItem" wx:key="customIndex">
索引index:{{customIndex}},值:{{customItem}}</view>
修改之后结果正常显示,控制台的警告信息也会消失。
2.条件渲染
2.1 wx:if
wx:if="{{条件表达式}}"
,表达式成立则组件显示,不成立则组件不显示。一般也与wx:elif、wx:else进行多条件比较。下面用案例进行说明:
定义一个数字:num,如果是1则显示男,如果是2则显示女,其他的数显示未知。
index.js中:
Page({data: {num:1}
})
index.wxml中:
<view wx:if="{{num == 1}}">等于1显示男</view>
<view wx:elif="{{num == 2}}">等于2显示女</view>
<view wx:else>其他显示未知</view>
显示结果如下:
为了方便调试,修改num值后观察效果,可以直接从appData中修改num值,这样就可以不用频繁修改index.js中num值进行保存了,处理方式如下:
2.2 wx:hidden
说到控制组件是否显示就不得不说一下hidden属性,hidden值为true时也回控制组件不显示。
index.js中:
Page({data: {showView: true}
})
index.wxml中:
<view hidden="{{showView}}">是否展示view组件,true时隐藏,false时显示</view>
hidden属性控制组件是否显示是通过添加样式:display: none
来实现。可以打开控制台选中组件看下具体的样式信息:
hidden与wx:if的区别在于前者是添加了样式:display: none
,后者是重新创建或是删除对象实现的组件是否显示,从性能上来讲hidden性能更高,不过对于多重条件判断还是使用wx:if比较方便。
uni-app入门:WXML列表渲染与条件渲染相关推荐
- web前端高级React - React从入门到进阶之React条件渲染
系列文章目录 第一章:React从入门到进阶之初识React 第一章:React从入门到进阶之JSX简介 第三章:React从入门到进阶之元素渲染 第四章:React从入门到进阶之JSX虚拟DOM渲染 ...
- uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...
- 微信小程序基础而重要语法整理总结(数据绑定、运算表达式、循环渲染、条件渲染、事件绑定(传参))
目录 数据绑定 运算表达式 循环渲染 条件渲染 事件绑定(传参) 首先对初始化后的小程序目录进行梳理(图来自某机构) 补充: sitemap配置:小程序根目录下的sitemap. json文件用来配置 ...
- vue 双向绑定,列表、条件渲染,解决强制刷新闪烁问题
vue 双向绑定 v-model 列表渲染 v-for 条件渲染 v-if v-show 解决强制刷新闪烁问题 v-clock 双向绑定 v-model v-model 是 vue 中进行数据双向绑定 ...
- 列表渲染 wx:key 的作用、条件渲染 wx:if 与 hidden 的区别
这是微信小程序踩坑系列的第三篇,想要了解更多关于微信小程序开发的那些事,欢迎关注我的<微信小程序>专栏. 前言 开发微信小程序离不开"页面渲染",对于初学者来说很难理解 ...
- vue隐藏浏览器_一分钟学会Vue的条件渲染和列表渲染
介绍 之前一段时间由于工作很忙,没有时间继续学习Vue,今天算是继续对之前的学习进行补充了,今天要学习的便是Vue的条件渲染和列表渲染,我们将讨论if.if-else.if-else-if,show等 ...
- react把表格渲染好ui_在React中实现条件渲染的7种方法
借助react,我们可以构建动态且高度交互的单页应用程序,充分利用这种交互性的一种方法是通过条件渲染. 条件渲染一词描述了根据某些条件渲染不同UI标签的能力.在react文档中,这是一种根据条件渲染不 ...
- CSharpGL(30)用条件渲染(Conditional Rendering)来提升OpenGL的渲染效率
CSharpGL(30)用条件渲染(Conditional Rendering)来提升OpenGL的渲染效率 当场景中有比较复杂的模型时,条件渲染能够加速对复杂模型的渲染. 条件渲染(Conditio ...
- 实时渲染和离线渲染简介
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接: https://blog.csdn.net/sichuanpb/article/d ...
最新文章
- JAVA中LinkedLockingQueue的简单使用
- Kafka解惑之Old Producer(3)——Async Analysis
- CSS3制作一个简单的进度条
- PPC系统常见启动项(StartUp)解说
- 泛型数组列表ArrayList
- How to Install and Configure OpenSSH Server In Linux
- 继iptables之后的新一代包过滤框架是nftables
- 树莓派3B的WiFi中文乱码及搜索不到附近的WiFi_解决方案:
- 机器学习基础算法24-SVM理论部分
- 桌面文件丢失如何找回
- c语言笔记(翁凯男神
- 全球计算机病毒损失报告,世界十大计算机病毒 CIH的危险被公认,第二经济损失26亿美元...
- Android跳转到应用商店详情页面
- 致 Tapdata 开源贡献者:聊聊 2022 年的进展和新一年的共建计划
- 手把手带你 Unity 入门之从零创建一个时钟(GameObjects 与 Scripts)
- 解决qt5在windows系统下中文乱码的问题的简单方法
- SLAM导航机器人零基础实战系列:(四)差分底盘设计——2.stm32主控软件设计
- Android: 渠道号获取
- 外语学习应试教育时如何高效的背单词?
- 老罗的获奖感言及经验转载