wx:for wx:for-item wx:for-index wx:for-key

Posted 2023-04-09 掉坑的愉快之旅

wx:for wx:for-item wx:for-index wx:for-key 使用

• wx:for 语法
• • wx:for-item
  • wx:for-index
  • wx:for-key
  • data-*

wx:for 语法

小程序中列表渲染时，使用 wx:for 控制属性，来绑定一个数组，绑定后，即可使用数组中各项的数据，来渲染该组件。例子如下：

// array = [
//      name:zs,age:18,
//      name:lisi,age:18
//   ]
<view wx:for="array">
      <view> item.name + item.age   </view>
</view>

wx:for-item

wx:for-item , 数组当前项的变量名,默认为 item
作用：使用 （当前项变量名.属性名） 取得属性值

<view wx:for="array">
      <view> item.name + item.age   </view>
</view>

等同于 （需要注意的是 item 不使用 括起）

<view wx:for="array" wx:for-item=“item”>
      <view> item.name + item.age   </view>
</view>

赋值 （可随意命名）

<view wx:for="array" wx:for-item=“info”>
      <view> info.name + info.age   </view>
</view>

wx:for-index

wx:for-index, 数组的当前项的下标变量名 , 默认为 index

<view wx:for="array">
      <view> item.name + item.age   </view>
</view>

等同于

<view wx:for="array" wx:for-index=“index”>
      <view> item.name + item.age   </view>
</view>

赋值（可随意命名）

<view wx:for="array" wx:for-index=“key”>  // 赋值后，代码块内可以使用key代指当前项的下标
      <view> key </view>
</view>
// 界面输出
// 0
// 1

wx:for-key

1）wx:key 来指定列表中项目的唯一的标识符。
2）作用：希望列表中的项目保持自己的特征和状态
3）wx:key 的值以两种形式提供
1、字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2、保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。
示例：

不使用 wx:for-key状态

使用 wx:for-key状态 随之改变

data-*

data-xxx，自定义属性，触发事件时，会发送给事件处理函数, 即可通过e.xx进行数据获取。

 <view id="tapTest" data-hi="Weixin" bindtap="tapName"> Click me! </view>
----------------
Page(
  tapName: function(event) 
    console.log(event)
  
)

可以看到log出来的信息大致如下：

  "type":"tap",
  "timeStamp":895,
  "target": 
    "id": "tapTest",
    "dataset":  
      "hi":"Weixin"
    
  ,
  "currentTarget":  
    "id": "tapTest",
    "dataset": 
      "hi":"Weixin"
    
  ,
  "detail": 
    "x":53,
    "y":14
  ,
  "touches":[
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  ],
  "changedTouches":[
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  ]

小程序 页面动态for添加

<view wx:for="{{items}}" wx:for-index="index" wx:for-item="item">
{{index+1}}、{{item.title}}
</view>

核心代码就是 wx:for，对应一个数组。

而 wx:for-index 指明后面如果要用数组索引的话，用什么名字，如果名字是 index，则可省略，直接使用。

而 wx:for-item 指明后面如果要用数组索引对应的项的话，用什么名字，如果名字是 item，则可省略，直接使用。

.js 代码

Page({

data: {
    items: [
        {
            "url":"http://127.0.0.1/1.flv",
            "title":"这是标题一"
        },
        {
            "url":"http://127.0.0.1/2.flv",
            "title":"这是标题二"
        }
    ]
}

})

 

原文地址: http://blog.csdn.net/yelin042/article/details/72518977