微信小程序（8）：WXML数据绑定条件渲染列表渲染

喜欢ヅ旅行 2023-01-04 13:10 112阅读 0赞

### 文章目录 ###

*   *   *  一、数据绑定
         *  二、条件渲染
         *  三、列表渲染
         *   *   *  1. wx:for
                 *  2. wx:for-item wx:for-index
                 *  3. wx:key

### 一、数据绑定 ###

WXML 中的动态数据均来自对应 Page 的 data。

1.  先在 index.js 文件里敲入 page，弹出以下代码：

Page({ 
    
      /** * 页面的初始数据 */
      data: { 
        
      },
    
      /** * 生命周期函数--监听页面加载 */
      onLoad: function (options) { 
        
      },
    
      /** * 生命周期函数--监听页面初次渲染完成 */
      onReady: function () { 
        
      },
    
      /** * 生命周期函数--监听页面显示 */
      onShow: function () { 
        
      },
    
      /** * 生命周期函数--监听页面隐藏 */
      onHide: function () { 
        
      },
    
      /** * 生命周期函数--监听页面卸载 */
      onUnload: function () { 
        
      },
    
      /** * 页面相关事件处理函数--监听用户下拉动作 */
      onPullDownRefresh: function () { 
        
      },
    
      /** * 页面上拉触底事件的处理函数 */
      onReachBottom: function () { 
        
      },
    
      /** * 用户点击右上角分享 */
      onShareAppMessage: function () { 
        
      }
    })

1.  在 data 中填入数据，例如：

data: { 
        name:"张三",
        age:22,
        arr:["aaa","bbb","ccc"],
        user:{ 
          name:"王五",
          sex:"男",
          age:33
        },
        picurl:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1612138888,1794405442&fm=26&gp=0.jpg"
      },

1.  index.wxml 中写入：

<view>我的名字是：{
       {name}}，年龄是：{
       {age}}</view>
    <view>{
       {arr}}</view>
    <view>{
       {user.name}}-{
       {user.age}}-{
       {user.sex}}</view>
    <image src="{ {picurl}}"></image>

效果图如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]

### 二、条件渲染 ###

data: { 
        day:2,
      },

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]

### 三、列表渲染 ###

##### 1. wx:for #####

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

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item 。

<view>
      <view class="item" wx:for="{ {arr}}">{ { index+1}}--{ { item}}</view>
    </view>

![在这里插入图片描述][20210109222553157.png]

也可以：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 2]

##### 2. wx:for-item wx:for-index #####

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名。

<view>
      <view class="item" wx:for="{ {arr}}" wx:for-index="i" wx:for-item="itemName">{
       {i+1}}--{
       {itemName}}</view>
    </view>

![在这里插入图片描述][20210109222917800.png]

##### 3. wx:key #####

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

如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

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

*  字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
 *  保留关键字 \*this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

例：

将 data 值改为：

data: { 
        listArr:[
          { 
            id:1,
            title:"lalala",
            time:"2020-01"
          },
          { 
            id:2,
            title:"hahaha",
            time:"2020-02"
          },
          { 
            id:3,
            title:"xixixi",
            time:"2020-03"
          }
        ]
      },

index.wxml代码：

<view class="item" wx:for="{ {listArr}}" wx:key="{ {item.id}}">
      <text>{
       {item.title}}</text>
      <text>{
       {item.time}}</text>
    </view>

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]: /images/20221119/57a44770b9414115bff8957194e2af2f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]: /images/20221119/807cec34ef194ef5834a1c47e1eec4d1.png
[20210109222553157.png]: /images/20221119/7e789305f590451fbb9616b7282b8ba3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2021011009552439.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70
[20210109222917800.png]: https://img-blog.csdnimg.cn/20210109222917800.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210110094956319.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70