微信小程序day01_13之小程序视图层列表渲染

喜欢ヅ旅行 2022-03-12 02:12 258阅读 0赞

### 文章目录 ###

*   *   *  列表渲染
         *  关于列表渲染的注意事项
         *   *  1.当 wx:for 的值为字符串时，会将字符串解析成字符串数组
             *  2. 花括号和引号之间如果有空格，将最终被解析成为字符串

### 列表渲染 ###

官网文档  
[https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html][https_developers.weixin.qq.com_miniprogram_dev_framework_view_wxml_list.html]

`wx:for`  
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item  
代码示例:  
在js中定义如下的数组

Page({ 
      /** * 页面的初始数据 */
      data: { 
        users: [
          { name: "jack"},
          { name: "rose"},
          { name: "lily"}
        ]
      }
     })

在页面中引用如下

<view class='container'>
      <view wx:for="{ {users}}">
          下标: {
       {index}} , 姓名 : {
       {item.name}}
      </view>
    </view>

最终显示效果如下, 成功进行了数组的遍历  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70][]

*  使用 wx:for-item 可以指定数组当前元素的变量名,即可以改变默认的当前元素item，
 *  使用 wx:for-index 可以指定数组当前下标的变量名,可以改变默认的下标index：  
    代码示例

<view wx:for="{ {users}}" wx:for-index="idx" wx:for-item="itemName">
          下标: {
       {idx}} , 姓名 : {
       {itemName.name}}
      </view>

显示效果如下, 同样进行了遍历  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1][]  
`block wx:for`  
以渲染一个包含多节点的结构块  
代码示例

<view class='container'>
      <view wx:for="{ {users}}">
          下标: {
       {index}} , 姓名 : {
       {item.name}}
      </view>
    
      <block wx:for="{ {users}}">
          下标: {
       {index}} , 姓名 : {
       {item.name}}
      </block>
    
    </view>

效果如图所示, 用block标签的 没有换行, 使用view标签的换行了.  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2][]

### 关于列表渲染的注意事项 ###

#### 1.当 wx:for 的值为字符串时，会将字符串解析成字符串数组 ####

例如代码如下:

会等同于如下

页面中实际渲染如下:  
![20190309101148719.png][]

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

例如代码如下

等同于如下的代码

实际渲染如下, 会有空格隔开.  
![20190309101456395.png][]

[https_developers.weixin.qq.com_miniprogram_dev_framework_view_wxml_list.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20220312/abf8521bea9942b49e6241802c1f5db2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]: /images/20220312/8762287825d64186be2ccdf003d36024.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2]: /images/20220312/0b6bf1586fdb4055a9b8b810d4f549ca.png
[20190309101148719.png]: /images/20220312/d5e2bf7eb31b454d8aee9419f61b7025.png
[20190309101456395.png]: /images/20220312/ad652c1674f2434cafdad549ccfb5856.png