转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-14/

列表的渲染,不管是任何语言都有列表这个概念。源码:https://github.com/limingios/wxProgram.git 中的No.8

小程序的列表的渲染

  1. for 循环
  2. 官方的阐述

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html

在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item。

  1. 演示列表
    >* wx:for
    在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
    >* block wx:for
    类似 block wx:if,也可以将 wx:for 用在标签上,以渲染一个包含以渲染一个包含多节点的结构块。

listFor.wxml

<!listFor.wxml-->
<view class="container">
<view wx:for="{{users}}" wx:key="userInfoListId1">
下标:{{index}},内容:{{item.name}}
</view>
<!---index别名的方式,item别名的方式-->
<view wx:for="{{users}}"wx:for-index="idx" wx:for-item="itemName" wx:key="userInfoListId2">
下标:{{idx}},内容:{{itemName.name}}
</view>
<!---block 是一行下来的,不会自动换行-->
<block wx:for="{{users}}"wx:for-index="idx" wx:for-item="itemName" wx:key="userInfoListId3">
下标:{{idx}},内容:{{itemName.name}}
</block> <!--字符串,自动变成数组-->
<view wx:for="微信公众号:编程坑太多">
{{item}}
</view>
<!---for循环的嵌套-->
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
<view wx:if="{{i <= j}}">
{{i}} * {{j}} = {{i * j}}
</view>
</view>
</view>
</view>

listFor.js

//listFor.js
//获取应用实例
const app = getApp() Page({
data: {
users: [{
name: "公众名称"
},
{
name: "编程坑太多"
},{
name: "公众号"
},{
name: "idig88"
} ] } })

在实际开发过程中遇到 warning: Now you can provide attr “wx:key” for a “wx:for” to improve performance.
如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。
解决方案还是有的 wx:key=”几个名字加进去”

PS:下节详细解释下wx:key 的重要性。

「小程序JAVA实战」小程序视图之细说列表渲染(14)的更多相关文章

  1. 「小程序JAVA实战」小程序的flex布局(22)

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-22/ 之前已经把小程序的框架说完了,接下来说说小程序的组件,在说组件之前,先说说布局吧.源码:ht ...

  2. 「小程序JAVA实战」小程序视图之细说wx:key列表高级特性(16)

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-16/ wx:key的高级特性.这个很重要,因为在app上经常有上拉,下拉加载,我们如果不使用这个特 ...

  3. 「小程序JAVA实战」小程序的留言和评价功能(70)

    转自:https://idig8.com/2018/10/28/xiaochengxujavashizhanxiaochengxudeliuyanhepingjiagongneng69/ 目前小程序这 ...

  4. 「小程序JAVA实战」小程序的举报功能开发(68)

    转自:https://idig8.com/2018/09/25/xiaochengxujavashizhanxiaochengxudeweixinapicaidancaozuo66-2/ 通过点击举报 ...

  5. 「小程序JAVA实战」小程序的个人信息作品,收藏,关注(66)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudegerenxinxizuopinshoucangguanzhu65 ...

  6. 「小程序JAVA实战」小程序的关注功能(65)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeguanzhugongneng64/ 在个人页面,根据发布者个人和 ...

  7. 「小程序JAVA实战」小程序的视频点赞功能开发(62)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeshipindianzangongnengkaifa61/ 视频点 ...

  8. 「小程序JAVA实战」小程序的springboot后台拦截器(61)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudespringboothoutailanjieqi60/ 之前咱们把 ...

  9. 「小程序JAVA实战」小程序首页视频(49)

    转自:https://idig8.com/2018/09/21/xiaochengxujavashizhanxiaochengxushouyeshipin48/ 视频显示的内容是视频的截图,用户的头像 ...

  10. 「小程序JAVA实战」小程序视频封面处理(48)

    转自:https://idig8.com/2018/09/16/xiaochengxujavashizhanxiaochengxushipinfengmianchuli47/ 截图这块,在微信小程序工 ...

随机推荐

  1. using中StreamWriter XmlWriter 区别

    使用StreamWriter using (var writer = new StreamWriter(File.Create(path))) { writer.WriteLine("sdf ...

  2. .net collection tips

    1.数组对象都是Array的子类,Array是一个抽象类,不能显示实例化,Array提供了大量操作数组的静态方法 2.ArrayList其实是内部封装了一个array,实现了IList的接口.add ...

  3. 兼容iOs7的自定义alertView

    转载请注明出处. 升级到ios7后,旧项目中使用的继承UIAlertView的自定义alertview无法正常显示了,无奈只好换思路去实现,改成从当前keywindow下创建要显示的alertview ...

  4. BZOJ1407 NOI2002 Savage 【Exgcd】

    BZOJ1407 NOI2002 Savage Description Input 第1行为一个整数N(1<=N<=15),即野人的数目. 第2行到第N+1每行为三个整数Ci, Pi, L ...

  5. String.format()格式化日期(2)

    在以前的开发中,日期格式化一直使用的是SimpleDateFormat进行格式化.今天发现String.format也可以格式化.当 然,两种方式的优劣没有进行深入分析. 1. 日期格式化 (2018 ...

  6. flask第十一篇——自定义url转换器

    首先和大家说一下flask的组成,flask其实是werkzeug(路由和http处理)+SQLAlchemy(数据库)+Jinja2(模板)组成的,今天我们要看到的东西就是`werkzeug`里面的 ...

  7. __getitem__ 专用方法

    (1)  __getitem__ 专用方法很简单.像普通的方法 clear,keys 和 values 一样,它只是重定向到字典,返回字典的值.但是怎么调用它呢?哦,你可以直接调用 __getitem ...

  8. nginx 调试

    配置单进程非daemon方式启动 daemon off; master_process off;

  9. Oracle 12c RAC 日志体系结构的变化

    1    说明 在11g中,查看GRID的日志,会进入$ORACLE_HOM/log. [grid@cndba.cn ~]$ cd $ORACLE_HOME/log/ [grid@cndba.cn l ...

  10. 监控mysql状态并发送Email

    */10 * * * *  /shell/mysql_status.sh > /dev/null 2>&1 #!/bin/bash port55=`/usr/sbin/lsof - ...