微信小程序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 清除输入框中的数据
Apr 13 Javascript
javascript中bind函数的作用实例介绍
Sep 28 Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 Javascript
基于jquery实现三级下拉菜单
May 10 Javascript
深入理解$.each和$(selector).each
May 15 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
Oct 26 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
解决layer 动态加载select 失效的问题
Sep 18 Javascript
javascript实现简单打字游戏
Oct 29 Javascript
解决vue+router路由跳转不起作用的一项原因
Jul 19 Javascript
微前端qiankun改造日渐庞大的项目教程
Jun 21 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
30个php操作redis常用方法代码例子
2014/07/05 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
Yii2框架dropDownList下拉菜单用法实例分析
2016/07/18 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
深入分析PHP设计模式
2020/06/15 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
非常漂亮的JS代码经典广告
2007/10/21 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
2020/09/12 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
微信JS接口大全
2016/08/25 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
jquery点击展示与隐藏更多内容
2016/12/03 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
JS面向对象的程序设计相关知识小结
2018/05/26 Javascript
了解重排与重绘
2019/05/29 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
2019/12/10 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
python 编码规范整理
2018/05/05 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
python3字符串操作总结
2019/07/24 Python
浅谈Python协程
2020/06/17 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
勤俭节约倡议书
2014/04/14 职场文书
网络营销策划方案
2014/06/04 职场文书
离婚案件原告代理词
2015/05/23 职场文书
采购部年度工作总结
2015/08/13 职场文书