wx:for循环中的key标识问题和setData函数

最新推荐文章于 2022-01-07 03:21:56 发布
最新推荐文章于 2022-01-07 03:21:56 发布
阅读量698 收藏
点赞数
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aliven1/article/details/106112514
版权

1.wx:for给每个循环的item绑定唯一的key,是为了避免在虚拟dom比较的时候，由于数据更新，使用了默认的index，导致渲染错位出现异常情况；

2.wx:for中的每一个条目变量，item，index可以直接用，为了可读性，也可以修改成自己需要的变量；

3.setData修改数据的时候，如果没有调用，会修改数据源，但页面不会重新渲染，所以必须调用setData函数；

aliven1
关注
专栏目录
微信小程序关于for循环之后setData
weixin_44241356的博客
06-03 2034
微信小程序关于for循环之后setData Page({ /** * 页面的初始数据 */ data: { types: [], select: '', goods:[] }, onLoad: function (options) { var that = this db.collection("goods_type").where({condition:1}).get({ success: res =>{
小程序wx:key的值各种使用解读复盘
weixin_43046729的博客
06-15 2976
近期重新梳理了一下小程序吧知识点记录在文档里，当笔记，如果你有需要，一起学习吧 1.wx:key 必定是在wx:for中使用，它代表着微信的标识，其实就是在页面循环中的制定的循环key值，因为在v层更好的渲染和支持提供。 2.在使用 wx:key的情况下，如果wx:for中的array数据（array指当前item值）发生改变，只是将对应的对象重新排序其实就是数据重写。未发生变化的对象，不会重新创建这样就实现了对应vue的mvvm的数据更新操作相似（这里不多评价，毕竟都有借鉴的痕迹） 3.wx:key的取值
html语言生成上下标,for循环生成的html代码对应的下标问题
weixin_36360511的博客
06-09 198
天涯尽头无女友for (var j = 0; j < result[i].SeatInfos.length; j++) { $(".lv-ticketNum" + i).append('' + result[i].SeatInfos[j].SeatNum + ''); if(result[i].SeatInfos...
微信小程序 获取wx:for下标
wyqvong的博客
03-04 8867
刚接触小程序，想通过看文档一边自学一边做一个简单但是刚需的小程序 在使用wx:for循环button按钮的时候，我需要获取每个按钮的下标index，但是官方文档好像并没有说的很清楚，后来通过面向百度编程找到了解决方法 在标签上加 wx:for-index="index" data-index="{{index}}" 即 <button wx:for="{{picks}}" ...
wx:for详解(附wx:key注意事项)
Lawless
07-19 3万+
之前有学过微信小程序的开发，今天看视频有进行了相关学习。之前也有学过Vue,与微信小程序语言有点相像，生命周期感觉都是大同小异。 之前的博客：Vue.js生命周期 Mr.J--Vue之v-for全解析 wx:for定义 官方文档：在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。 默认数组的当前项的下标变量名默认为index，数组当前项的变量...
微信小程序 wx:for遍历循环使用实例解析
10-16
在微信小程序中，我们经常会用到列表数据的显示和操作，这就需要使用微信小程序提供的wx:for指令来实现数据的循环遍历。本文将详细介绍微信小程序中的wx:for遍历循环的使用方法，并通过实例代码来深入解析其用法。 ...
小程序之wx:for通过data自定义标签传值和setData的使用
weixin_34357962的博客
05-24 1071
2019独角兽企业重金招聘Python工程师标准>>> ...
【小程序学习】列表渲染 wx:for
翱翔于世纪的博客
07-30 595
一、文章描述： 使用wx:for对数据进行渲染 使用事件绑定对数据进行添加，并再次渲染 总结 二、程序代码： 简单的数据渲染 demo.js：在data中定义了一个list数组，存放着三个对象。 // pages/demo/demo.js Page({ /** * 页面的初始数据 */ data: { list:[ { id:0, name:"小明", age:17 }, {
关于微信小程序WXML列表渲染中的wx:key笔记说明
zpznba的博客
01-30 1637
1.直接看看官方文档中给出的说明： 如果列表中项目的位置会动态改变或者有新的项目添加到列表中， 并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态）， 需要使用 wx:key 来指定列表中项目的唯一的标识符。 wx:key 的值以两种形式提供 1.字符串，代表在 for 循环的 array 中 item 的某个 property，该 prope...
1.利用wx:if及wx:for数据绑定来实现输出乘法口诀表的编程
最新发布
03-11
利用wx:if和wx:for数据绑定可以实现输出乘法口诀表的编程。首先，我们需要在wxml文件中定义一个用于显示乘法口诀表的区域，可以使用wx:for循环来遍历数据并输出相应的内容。接下来，在js文件中定义一个数组或对象来...
微信小程序双重循环嵌套之角标和对象
qq_36356379的博客
04-24 2000
小程序关于数据的展示会经常用到双层for循环，这就涉及到获取外循环的角标及对象、获取内循环角标及对象，开始接触的时候用起来比较混乱，在此记录下使用方法 项目中部分截图 一、代码解析 wordlist：整个大题，里面有两个小题，每个小题有三个选项 因此需要两个for循环，外层循环是显示两个小题，内层循环是显示三个选项 二、用到的小程序语法 其实双层for循环只需要记住两个语法基本就够了 wx...
html文件如何for循环,html循环代码怎么写？有几种循环语句？
weixin_29731589的博客
06-19 1万+
在互联网的热潮中，不断的涌现出很多的技术岗位。那么今天我们就来说下有关于“html循环代码怎么写？”这个问题吧！下面是小编的一些方法和代码，希望对大家有所帮助。1.首先我们新建个 .html 文件在文件中输入下面这些代码就可以实现循环了，会比较的相对简单。代码如下：循环的使用var array1 = [1,4,2,5,7,8];//遍历数据 利用下标的变化for(var i=0;idocumen...
好程序员Python培训分享For循环用法详解
qq_35970166的博客
09-30 619
好程序员Python培训分享For循环用法详解，结合实例形式详细分析了Pythonfor循环的功能、原理、用法及相关操作注意事项，下面我们一起来看一下吧。 　　Python有两种类型的循环：for循环和while循环。for循环用来遍历可迭代对象。 　　可迭代对象是每次可以返回其中一个元素的对象,包括字符串、列表和元组等序列类型，以及字典和文件等非序列类型。还可以使用迭代器和生成器定义可迭代对象 For循环示例: iterable of cities cities = [‘new york city’, ‘
微信小程序入门教程--列表渲染多层嵌套循环及wx:key的使用
大新软件老杨
01-02 2165
前言 入门教程之列表渲染多层嵌套循环，目前官方的文档里，主要是一维数组列表渲染的案例，还是比较简单单一，给刚入门的童鞋还是无从入手的感觉。 view wx:for="{{items}}"> {{index}}: {{item.message}} view> 还有一个九九乘法表把数据直接写到wxml里的，并不是动态二维数组的列表渲染。 view wx:for="{{[1, 2,
微信小程序wx:key和wx:for问题
whoTMcares的博客
11-01 6172
代码如上，当二级列表循环渲染的时候，wx:key就报错了？请问是什么原因？ 另外关于wx:for-index，当wx:for='attr'的时候，如何同时获取到当前的下标和键名,默认的index为0，1，3，4；而使用了wx:for-index='idx'之后，idx的值就不再是下标，而直接是键名了，请问这个怎么可以同时获取？
微信小程序Component observers监听data数据更新导致死循环
码路
01-07 1035
在开发环境执行没有问题，发布到正式环境就出现死循环,导致死循环的原因是获取item后，有setData({item})，导致一直死循环了 observers: { 'item': function (item) { const $this = this; if (item == null) { return; } wx.getLocation({ type: 'wgs84', success(res.
微信小程序 - 高级 - wx:for 与 wx:for-items 与 wx:key - 1
热门推荐
山云的专栏
07-29 9万+
前言： 微信小程序的循环实现，通过wx:for 与 wx:for-items 与 wx:key,那么他的主要使用特点是什么呢？ 1 wx:for 从目前的例子看，wx:for 的使用确实是对数组来做的，参考微信icon示例程序。 示例里面都是对数组进行条件判断，比如iconsizejius就是一个典型的数组。   2 wx:for-items 与wx:for-item 2.1...
微信小程序中 wx:for=""和wx:key=""是什么关系
信徒博客
05-22 6192
微信小程序中一般都会要求有wx:for=""和wx:key=""两个都存在，不然会有警告 最简单的解释 wx:for="里面是要循环遍历的数组" wx:key="指向数组里面的某个属性" demo如下 <view class="top_tip" wx:for="{{mydata}}" wx:key="item.nid"> {{item.nid}}、{{item...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

aliven1

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值