微信小程序C语言通讯录,微信小程序のwxml列表渲染

列表渲染存在的意义

以电商为例，我们希望渲染5个商品，而又希望容易改变，我们就要在wxml中动态添加。

{{index+1}}:{{item.name}}

Page({

data: {

message: "hello world",

products: [{

name: "商品A"

},

{

name: "商品B"

},

{

name: "商品C"

},

{

name: "商品D"

},

{

name: "商品E"

}

]

}

})

上面在一个非显示组件block中，我们渲染五个有内容的view

wx:for是循环数组，wx:for-item即给列表赋别名

子循环

{{item.id}}

{{items.name}}{{items.account}}

wx:key用来稳定渲染，作为渲染想的唯一标识(主要有三种)

1、字符串

代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。

data: {

input_data: [

{ id: 1, unique: "unique1" },

{ id: 2, unique: "unique2" },

{ id: 3, unique: "unique3" },

{ id: 4, unique: "unique4" },

]

}

//test.wxml

2、保留关键字 *this

代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：

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

data: {

numberArray: [1, 2, 3, 4],

stringArray:['aaa','ccc','fff','good']

}

//test.wxml

},

一般是指定一个唯一的字段(类似于id的定义);

3、通配符+名字

用wx:key和不用对比

wk:key

组件识别

渲染情况

状态情况

for效率

有

各组件可识别

渲染时仅改变组件顺序

保持组件之前原来状态

效率高

无

组件无法识别

渲染时重新创建各组件

重置组件的初始状态

效率低

1.需要wx:key的情况

列表中项目的位置会动态改变或者有新的项目添加到列表中

希望列表中的项目保持自己的特征和状态

(如 中的输入内容， 的选中状态)

微信小程序-视图列表渲染

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

微信小程序：列表渲染

wx:for,(wx:for-item,wx:for-index),wx:key. 列表循环包括数组循环和对象循环 一.数组循环 此时控制台报错如下:属性"wx:key"可以提高性 ...

微信小程序的页面渲染(if/for)

下面,粗略的介绍一下微信小程序的条件渲染.列表渲染.数据绑定等,详细的内容大家可以去看微信小程序的API,在此只做简单描述,希望能帮助到大家 条件渲染

微信小程序新闻列表功能(读取文件、template模板使用)

微信小程序新闻列表功能(读取文件.template) 不忘初心,方得始终.初心易得,始终难守. 在之前的项目基础上进行修改,实现读取文件内容作为新闻内容进行展示. 首先,修改 post.wxml 文件 ...

微信小程序WXML页面常用语法(讲解+示例)

(一) WXML 是什么 官方说明:WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构 在前面我们就已经提过,WXML,就可 ...

微信小程序新闻网站列表页

在app.json中可以设置所有文件的头部导航颜色 (是window属性的子属性) 在具体页面可以单独设置该页面的导航颜色 (直接写该属性,不需要写window属性) 查看官方文档,可以看到好多全局属 ...

微信小程序wxml和wxss样式

对于css不熟悉的android程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了.微信小程序的排版就跟wxml和wxss有关了,它们两者相当于android的布局文件,其中wxml指 ...

微信小程序富文本渲染组件html2wxml及html2wxml代码块格式化在ios下字体过大问题

1.组件使用: 之前微信小程序的富文本渲染组件用的wxParse,对普通富文本确实可以,但是对于代码格式pre标签则无法使用. 下面这个html2wxml很不错,可以支持代码高亮. 详细文档:http ...

微信小程序wxml文件中调用自定义函数

想在微信小程序的wxml文件里自如的像vue那样调用自定义的方法,发现并不成功,得利用WXS脚本语言. WXS脚本语言是 WeiXin Script 脚本语言的简称,是JavaScript.JSON. ...

随机推荐

(剑指Offer)面试题20：顺时针打印矩阵

题目: 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字, 例如,如果输入如下矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打印出数字1,2, ...

层叠水平(stacking level)

运用上图的逻辑,上面的题目就迎刃而解,inline-blcok 的 stacking level 比之 float 要高,所以无论 DOM 的先后顺序都堆叠在上面. 不过上面图示的说法有一些不准确,按 ...

Jmeter 日志设置---如何设置java协议中被测jar的日志？

先转载一下Jmeter的日志设置: Jmeter运行出现问题可以通过调整jmeter的日志级别定位问题,但运行测试时建议关闭jmeter日志,jmeter打印日志耗费系统性能. Jmeter日志默认存 ...

WebBrowser控件的高级定制+mshtml

--> blog:WebBrowser控件的高级定制---以下为三篇重要的参考文献,    第一篇可以禁用了js弹窗和声音    第二篇的引用文献禁用了IE弹窗,但是原文的说明很好    第3篇 ...

iOS开发之protocol和delegate

protocol--协议 协议是用来定义对象的属性,行为和用于回调的.     协议中有两个keyword@private和@optional,@private表示使用这个协议必需要写的方法,@op ...

腾讯发布新版前端组件框架 Omi，全面拥抱 Web Components

Omi - 合一 下一代 Web 框架,去万物糟粕,合精华为一 → https://github.com/Tencent/omi 特性 4KB 的代码尺寸,比小更小 顺势而为,顺从浏览器的发展和 AP ...

Thinkphp的S缓存用法！

/节点列表 public function node(){ if(!$node = S('node_list')){ $field = array('id', 'name', 'title', 'pi ...

Web.config Transformation Syntax for Web Application Project Deployment

Web.config Transformation Syntax for Web Application Project Deployment Other Versions   Updated: Ma ...

我也学习JAVA多线程-join

在工作中,挺少遇到join关键字,但很多多线程资料和面试过程中,初中级开发工程师总会遇到join. 今天一起学习下join. join的作用:等待指定的时间(当为0时,一直等待),直到这个线程执行结束 ...