微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法


Posted in Javascript onMay 19, 2020

前言:

微信小程序的循环实现,通过wx:for 与 wx:for-items 与 wx:key,那么他的主要使用特点是什么呢?

1 wx:for

从目前的例子看,wx:for 的使用确实是对数组来做的,参考微信icon示例程序。

微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法

示例里面都是对数组进行条件判断,比如iconsizejius就是一个典型的数组。

微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法

2 wx:for-items 与wx:for-item

2.1 wx:for-items

现在看wx:for-items, 和wx:for比,wx:for-items有什么不同呢?

【案】笔者认为wx:for-items应该可以包容wx:for,而不是像有些朋友说,wx:for用于数组的单循环,而wx:for-items用于可嵌套的多级循环。

微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法

 很显然,wx:for-items,在上面的例子里面用于数组,也同时用于外层的单循环。

【案】

<view wx:for-items="{{array}}" wx:for-item="item">

分析一下,

wx:for-items首先指向了数组array,

微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法

之后,wx:for-items 选取了item,做进一步的循环STEPS,

我们看到array的一个item包含两个属性,

微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法

2.2 wx:for-item

wx:for-item注意wx:for-items比少了S,wx:for-item主要只是对循环项目数组的元素(item in array)重新命名,这里

这里array的元素被item取代来表示。

微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法

 还是刚才的例子,现在看右边,item被用于对循环内体的设置,

微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法

然后实现对数组内多个元素的渲染

微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法

3  wx:key

 wx:key是对微信循环功能的一次提升,在软件编译的时候,微信会提示你是用 wx:key来稳定视图层的项目显示。

微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法

摘取 一段定义的描述,

wx:key 的值以3种形式提供

  • 字符串

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

  • 保留关键字 *this

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

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

  • 通配符+名字 

例如 *item

 4 嵌套的应用

上面的例子都比较简单,只有一层或者一个属性的嵌套,现在看一个复杂一点的,例子,来源于官方的组件展示程序。

微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法

这是一个多级菜单的展示,用户点击后,会展开三个选项,而每一个选项对应一个页面,

微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法

<view class="index-bd">
 <view class="kind-list">
  <block wx:for-items="{{list}}" wx:key="{{item.id}}">
  <view class="kind-list-item">
   <view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="kindToggle">
   <view class="kind-list-text">{{item.name}}</view>
   <image class="kind-list-img" src="resources/kind/{{item.id}}.png"></image>
   </view>
   <view class="kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}">
   <view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}">
    <block wx:for-items="{{item.pages}}" wx:for-item="page" wx:key="*item">
    <navigator url="pages/{{page}}/{{page}}" class="navigator">
     <view class="navigator-text">{{page}}</view>
     <view class="navigator-arrow"></view>
    </navigator>
    </block>
   </view>
   </view>
  </view>
  </block>
 </view>
 </view>

从这段代码里面,我们看到, 针对上面这个比较复杂的数据结构,在block tag里面(有两层block)

先对list,用wx:for-items,

<block wx:for-items="{{list}}" wx:key="{{item.id}}">

做最外层循环,这里list里面的数组元素,就变为item了,item有4个属性,其中一个是pages,

【注意】这里wx:for-items和wx:for的不同就是,wx:for-items默认的循环项为item,不需要指定了。所以,第二层循环的item,解释器已经理解了,现在item下面的pages,依旧是一个数组,我们可以在嵌套来遍历他。

<block wx:for-items="{{item.pages}}" wx:for-item="page" wx:key="*item">

然后,用wx:for-items,对list里面的pages属性内嵌数组做了遍历循环,注意,后面又立即跟了wx:for-item="page",注意,这里没有s,就是对item的元素pages数组的元素重新命名为page了,后面的page操作,就是对这个内嵌数组操作。这里wx:for-item的命名其实是一个可选项,如果不命名,默认就是item,也就是嵌套的循环下标也是item,大概是为了避免误解,导致,微信团队,又加了这一个功能,个人觉得有点多余。

参考:

1小程序wx:for、wx:for-items和wx:for-item的正确用法

https://developers.weixin.qq.com/miniprogram/dev/component/image.html?search-key=wx%3Afor

2 微信小程序的wx:for,wx:for-items,wx:for-item,wx:key等的关系及正确使用

https://blog.csdn.net/u013338742/article/details/78785918

到此这篇关于微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法的文章就介绍到这了,更多相关小程序 wx:for wx:for-items wx:key内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 Javascript
onmouseover和onmouseout的一些问题思考
Aug 14 Javascript
button没写type=button会导致点击时提交
Mar 06 Javascript
javascript移出节点removeChild()使用介绍
Apr 03 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
Vue2实时监听表单变化的示例讲解
Aug 30 Javascript
vue实现div拖拽互换位置
Jul 29 Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 Javascript
深入理解Vue的数据响应式
May 15 Vue.js
微信小程序使用GoEasy实现websocket实时通讯
May 19 #Javascript
jQuery 动画与停止动画效果实例详解
May 19 #jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 #jQuery
通过js随机函数Math.random实现乱序
May 19 #Javascript
javascript实现获取中文汉字拼音首字母
May 19 #Javascript
微信小程序实现菜单左右联动
May 19 #Javascript
JS array数组检测方式解析
May 19 #Javascript
You might like
php eval函数一句话木马代码
2015/05/21 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
js href的用法
2010/05/13 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
2013/10/30 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
JQuery Mobile 弹出式登录框的实现方法
2016/05/28 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
jQuery插件版本冲突的处理方法分析
2017/01/16 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
Python3中的真除和Floor除法用法分析
2016/03/16 Python
Python内置函数delattr的具体用法
2017/11/23 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
亚历山大·王官网:Alexander Wang
2017/06/23 全球购物
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
GetYourGuide台湾:预订旅游活动、景点和旅游项目
2019/06/10 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
nohup的用法
2014/08/10 面试题
汽车运用工程系毕业生自荐信
2013/12/27 职场文书
法学函授自我鉴定
2014/02/06 职场文书
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
生产文员岗位职责
2014/04/05 职场文书
离退休人员聘用协议书
2014/11/24 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
单位推荐信范文
2015/03/27 职场文书
优秀员工演讲稿
2019/06/21 职场文书
Elasticsearch 批量操作
2022/04/19 Python
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS