微信小程序wxml列表渲染原理解析


Posted in Javascript onNovember 27, 2019

这篇文章主要介绍了微信小程序wxml列表渲染原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

列表渲染存在的意义

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

<view>
<block wx:for="{{products}}" wx:for-item="item" wx:key="index">


<view>{{index+1}}:{{item.name}}</view>

</block>
</view>
Page({
 data: {
  message: "hello world",
  products: [{
    name: "商品A"
   },
   {
    name: "商品B"
   },
   {
    name: "商品C"
   },
   {
    name: "商品D"
   },
   {
    name: "商品E"
   }
  ]
 }

})

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

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

子循环

<view wx:for="{{parentList}}">
 {{item.id}}
 <view wx:for="{{item.childList}}" wx:for-item="items">
 {{items.name}}{{items.account}}
 </view>

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
<input value="id:{{item.id}}" wx:for="{{input_data}}" wx:key="unique" />

2、保留关键字 *this

代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如:
当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。

data: {
numberArray: [1, 2, 3, 4],
stringArray:['aaa','ccc','fff','good']
}
//test.wxml
<input value="id:{{ item }}" wx:for="{{numberArray}}" wx:key="*this" />
<input value="id:{{ item }}" wx:for="{{stringArray}}" wx:key="*this" />
},

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

3、通配符+名字

用wx:key和不用对比

wk:key 组件识别 渲染情况 状态情况 for效率
各组件可识别 渲染时仅改变组件顺序 保持组件之前原来状态 效率高
组件无法识别 渲染时重新创建各组件 重置组件的初始状态 效率低

1.需要wx:key的情况

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

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

(如 <input/> 中的输入内容,<switch/> 的选中状态)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 获取表单file全路径
Dec 31 Javascript
JS 无法通过W3C验证的处理方法
Mar 09 Javascript
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
jQuery向后台传入json格式数据的方法
Feb 13 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
JavaScript实现数组降维详解
Jan 05 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 Javascript
Vue调用后端java接口的实例代码
Oct 28 Javascript
原生js实现下拉选项卡
Nov 27 #Javascript
浅析Vue下的components模板使用及应用
Nov 27 #Javascript
d3.js 地铁轨道交通项目实战
Nov 27 #Javascript
微信小程序表单验证WxValidate的使用
Nov 27 #Javascript
vue(2.x,3.0)配置跨域代理
Nov 27 #Javascript
微信小程序加载机制及运行机制图解
Nov 27 #Javascript
webgl实现物体描边效果的方法介绍
Nov 27 #Javascript
You might like
PHP中include与require使用方法区别详解
2013/10/19 PHP
编译PHP报错configure error Cannot find libmysqlclient under usr的解决方法
2014/06/27 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
php实现图片等比例缩放代码
2015/07/23 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
JS面向对象、prototype、call()、apply()
2009/05/14 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
安装dbus-python的简要教程
2015/05/05 Python
python网络编程之文件下载实例分析
2015/05/20 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
西班牙英格列斯百货英国官网:El Corte Inglés英国
2017/10/30 全球购物
工程招投标邀请书
2014/01/26 职场文书
自考毕业自我鉴定
2014/03/18 职场文书
大学新生入学教育方案
2014/05/16 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
入股合作协议书
2014/10/12 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS
PHP获取学生成绩的方法
2021/11/17 PHP
GTX1650super好不好 gtx1650super显卡属于什么级别
2022/04/08 数码科技