zoukankan      html  css  js  c++  java
  • 微信小程序里 wx:for和wx:for-item区别(补充下wx:key)

     wx:for

    一维数组情况:

    在页面上

    view  wx:for  ="{{list}}"  

    {{item.id}}

    view

    是循环list

    item是List的别名

    多维数组情况:

    view  wx:for  ="{{parent_list}}"  

    {{item.id}}

      view  wx:for  ="{{item.childlist}}"  wx:for-item="items"

        {{item.id}}

      view

    view

    items是子List的别名。子Lsit是 item.childlist

    总结: wx:for  是循环list   wx:for = "{{list}}"换成wx:for-items="{{list}}"    结果是一样 的     也就是 wx:for等价与wx:for-items是循环数组用的;

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

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

    <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
      {{idx}}: {{itemName.message}}
    </view>

    对 wx:key 补充:

    如果 列表中 项目位置 会动态改变  或者可能会有新的项目会加入列表中

    需要标识这个项目在列表的位置:

    则   可以选 用ltem的某个唯一的属性作为Key

    或者 用 *this  关键字代表   for循环的item本身,这种表示需要item本身就是 一个唯一的字符串或者数字。

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

     举例子:一个应用:

    获得了N条信息,但是不确定具体多少条。怎么在界面上显示呢

    wxml代码

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

      js代码

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

      

  • 相关阅读:
    Linux:PS命令详解与使用
    linux日志守护进程 syslog
    Linux shell 判断字符串为空等常用命令
    Java 中zookeeper操作
    mysql数据库读写分离,主从同步实现方法
    【转】几种Java序列化方式的实现
    如何为SUSE配置IP地址,网关和DNS
    linux中export的作用
    91家纺网,多线程版本待处理
    91家纺网爬虫,不包含多线程登录处理,第三张表格数据没有对接
  • 原文地址:https://www.cnblogs.com/yizhizhangBlog/p/9931268.html
Copyright © 2011-2022 走看看