微信小程序学习笔记二 列表渲染 + 条件渲染

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 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>

2. 花括号和引号之间如果有空格，将最终被解析成为字符串

<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

  <view wx:if="{{isShow}}"> True view><view wx:elif="{{!isShow}}">Falseview>

例二: wx:else

data: {flag: 1,
}

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

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

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

2.4 wx:if vs hidden

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！