1. 列表渲染

1.1 wx:for

  • 在组件上使用wx:for控制属性绑定一个数组, 即可使用数组中各项的数据重复渲染该组件
  • 默认数组的当前项的下标变量名默认为 index, 数组当前项的变量名默认为item

    演示

    index.js中我们定义以下数据
 data: {
arr: ["路明非", "楚子航", "凯撒", "芬格尔"],
},

编写index.wxml文件代码如下

  <!-- 列表渲染测试 -->
<view class="goStudy" wx:for="{{arr}}">
<text>{{item}} {{index}}</text>
</view>

运行效果:

index.jsdata属性中添加以下数据

 arr_obj: [{
name: "路明非",
blood: "S"
},
{
name: "楚子航",
blood: "A"
},
{
name: "凯撒",
blood: "A"
},
{
name: "芬格尔",
blood: "F"
}]
  • 渲染
  <!-- 列表渲染测试 -->
<view class="goStudy" wx:for="{{arr_obj}}">
<text>姓名:{{item.name}},血统: {{item.blood}}级 </text>
</view>


  • 使用 wx:for-item 可以指定数组当前元素的变量名,
  • 使用 wx:for-index 可以指定数组当前下标的变量名:
<view class="goStudy" wx:for="{{arr}}"  wx:for-index="arr_index" wx:for-item="arr_item">
<text>{{arr_item}},{{arr_index}}</text>
</view>

1.2 block wx:for

可以将 wx:for 用在<block/>标签上,以渲染一个包含多节点的结构块。例如:

<block wx:for="{{arr}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>

渲染效果:


1.3 wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 input 中的输入内容,switch 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供:

  1. 字符串, 代表在for循环的array中的item的某个property, 该property的值需要是列表中唯一的字符串或数字, 且不能动态改变
  2. 保留关键字*this 代表在for循环中item本身, 这种表示需要item本身是一个唯一的字符串或数字
  <view class="goStudy" wx:for="{{arr}}" wx:key="item">
<text>{{item}}</text>
</view>

1.4 注意事项

  1. wx:for 的值为字符串时,会将字符串解析成字符串数组
<view class="goStudy" wx:for="abc">
<text>{{item}}</text>
</view>

等同于

<view class="goStudy" wx:for='{{ ["a","b","c"] }}'>
<text>{{item}}</text>
</view>

  1. 花括号和引号之间如果有空格,将最终被解析成为字符串
<view wx:for="{{[1,2,3]}} ">
{{item}}
</view>

等同于

<view wx:for="{{[1,2,3] + ' '}}" >
{{item}}
</view>

2. 条件渲染

2.1 wx:if

  • 在框架中,使用 wx:if="" 来判断是否需要渲染该代码块:
<view wx:if="{{condition}}"> True </view>
  data: {
isShow:true,
},



如果将isShow的值改为false, 那么 包含True字符的组件就不会再被渲染


2.2 wx:elif + wx:else

例一: wx:elif

  <!-- 条件渲染测试- wx:elif -->
<view wx:if="{{isShow}}"> True </view>
<view wx:elif="{{!isShow}}">False</view>

例二: wx:else

data: {
flag: 1,
}
<!-- 条件渲染测试 wx:else -->
<view wx:if="{{flag === 0}}"> {{flag}}</view>
<view wx:elif="{{flag === 1}}">{{flag}}</view>
<view wx:else="{{flag}}">{{flag}}</view>


2.3 block wx:if

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

  • 注意<block/> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。

2.4 wx:if vs hidden

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

微信小程序学习笔记二 列表渲染 + 条件渲染的更多相关文章

  1. 微信小程序学习笔记二 数据绑定 + 事件绑定

    微信小程序学习笔记二 1. 小程序特点概述 没有DOM 组件化开发: 具备特定功能效果的代码集合 体积小, 单个压缩包体积不能大于2M, 否则无法上线 小程序的四个重要的文件 *js *.wxml - ...

  2. 【微信小程序学习笔记】入门与了解

    [微信小程序学习笔记(一)] IDE 下载安装 下载地址 官方工具:https://mp.weixin.qq.com/debug/w … tml?t=1476434678461 下载可执行文件后,可按 ...

  3. 微信小程序学习笔记一 小程序介绍 & 前置知识

    微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一 微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...

  4. 微信小程序学习笔记(二)--框架-全局及页面配置

    描述和功能 框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑. 响应的数 ...

  5. 微信小程序学习笔记(阶段一)

    一阶段学习过程: (一)看官方文档的简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/ (二)看小码哥视频:https://chuanke.baidu.co ...

  6. 微信小程序学习笔记(3)--------框架之配置

    我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. app.json 配置项列表 属性 类型 必填 描述 pages Stri ...

  7. 微信小程序学习笔记(一)--创建微信小程序

    一.创建小程序 1.申请帐号.安装及创建小程序,请参照官方文档里面的操作 https://developers.weixin.qq.com/miniprogram/dev/. 小程序在创建的时候会要求 ...

  8. 微信小程序学习笔记以及VUE比较

    之前只是注册了一下微信小程序AppID,随便玩了玩HelloWorld!(项目起手式),但是最近看微信小程序/小游戏,崛起之势不可阻挡.小程序我来了!(果然,一入前端深似海啊啊啊啊啊~) 编辑器: S ...

  9. 微信小程序学习笔记1--小程序的代码构成

    最近打算学习一下微信小程序,看了微信公众平台的文档感觉还比较简单,就从这个方向重新找回学习的状态吧: 1.先了解一下小程序的代码构成: 创建项目后会看到四种后缀的文件: .json 后缀的 JSON ...

随机推荐

  1. 谷粒学院-2-mybatisplus

    一.参考文档 官网:http://mp.baomidou.com/ 参考教程:http://mp.baomidou.com/guide/ MyBatis-Plus(简称 MP)是一个 MyBatis ...

  2. 5Java基础整理

    1.API:Application programming interface 举例:System类中的 public static void arraycopy(int[] src,int srcP ...

  3. 第三篇 -- SpringBoot打包成jar包

    本篇介绍怎么将SprintBoot项目打包成jar包. 第一步:点击IDEA右侧的maven. 第二步:双击package,然后就会开始打包,当出现build success时,就打包成功了,一般在t ...

  4. Linux 查看内存命令

    Linux 查看内存命令 top命令, Linux的top命令提供Linux资源使用情况的实时更新信息.不仅可以查看Linux内存,也可以查看CPU以及各个进程之间的对资源的占用情况.使用方式如下: ...

  5. Easyui设置easyui-textbox不可编辑

    转载自:https://blog.csdn.net/qq_23113521/article/details/78801689 在easyui里由于easyui-textbox被封装,通过一般的jque ...

  6. (Opencv4)二值化图像

    (Opencv4)二值化图像  ret, dst = cv2.threshold(src, thresh, maxval, type) threshold : 极限,临界值,阈值 ret: 一个数 s ...

  7. S7-200通过以太网模块,使用kepware与ifix建立通讯连接要点

    在前阵子项目改造中,需要利用先前的S7-200 PLC与ifix进行通讯,故而,在做好上位机后,在现场实际测试了下.通过CP243-1以太网模块,顺利与KEPWARE建立连接,其中当然也有些要点要注意 ...

  8. tp phpexcel 导入后台访问方法

    public function addall(){ $Water = M('Waterrate'); $config = array( 'maxSize' => 0, 'rootPath' =& ...

  9. 大数据学习(17)—— HBase表设计

    为啥要把表设计拿出来独立成章?因为我觉得像我这样搞了很多年Java后端开发的技术人员,在学习HBase的时候,会受到关系型数据库3NF.BCNF的影响.事实上,数据库范式在HBase里完全没用,必须转 ...

  10. 异地远程访问群晖NAS中的文件

    异地远程访问群晖NAS中的文件   我以群晖DS720+网络存储服务器为例,介绍我是如何异地远程访问群晖NAS中的文件的.   此文章只介绍部署操作的大概步骤,具体的操作方法和技巧可以在西瓜视频.抖音 ...