【小程序学习】列表渲染 wx:for

最新推荐文章于 2023-02-28 16:31:27 发布
最新推荐文章于 2023-02-28 16:31:27 发布
阅读量594 收藏 1
点赞数
分类专栏： 小程序 文章标签： 小程序 列表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43647384/article/details/107678623
版权
本文详细介绍了微信小程序中使用wx:for进行列表渲染的原理和实践，包括如何简单地渲染数据以及如何结合事件绑定实现数据动态添加。通过示例代码展示从初始数据到点击事件触发数据更新的过程，强调了wx:key的重要性以及在处理事件时this的使用技巧。适合小程序开发者学习参考。
摘要由CSDN通过智能技术生成
一、文章描述：
  1. 使用wx:for对数据进行渲染
  2. 使用事件绑定对数据进行添加，并再次渲染
  3. 总结
二、程序代码：
简单的数据渲染

demo.js：在data中定义了一个list数组，存放着三个对象。

// pages/demo/demo.js
Page({
   

  /**
   * 页面的初始数据
   */
  data: {
   
    list:[
      {
   
        id:0,
        name:"小明",
        age:17
      },
      {
   
        id:1,
        name:"小红",
        age:18
      },
      {
   
        id:2,
        name:"小月",
最低0.47元/天 解锁文章
翱翔于世纪
关注
专栏目录
微信小程序中的列表渲染wx:for和wx:key
weixin_50564041的博客
10-14 1570
wx:for 在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。 默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item <view wx:for="{{array}}"> {{index}}: {{item.message}} </view> Page({ data: { array: [{ message: 'foo', }, { message: 'bar'
【wx:for】小程序列表渲染的使用说明
weixin_30470857的博客
10-25 462
wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。 默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item，即： {{index}} 、 {{item}} . 标签原型（以标签block为例）： <block wx:for="{{array}}" wx:key="[String | *this]" wx:for-inde...
小程序砖块（四）wx:for列表渲染
阿则的博客
04-01 414
根据小程序文档：wx:for在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item&lt;view wx:for="{{array}}"&gt; {{index}}: {{item.message}}//item.message = array.message &lt;/vie...
小程序性能优化的几点实践技巧
weixin_33994444的博客
04-01 3526
大家好，我叫张文轩，这是我的第6篇分享 我们都知道，性能的好坏直接影响用户的体验。本文首先论述下如何评判一个小程序页面的性能情况，之后通过具体的案例重点讲解下几点实践技巧，最后再讲讲key值在渲染一个列表时发挥了一个怎么样的作用，以此来论述为啥key值对性能提升有帮助。 评判小程序页面性能 由于小程序开发环境的特殊性，我们不能像普通网页那样通过chrome开发工具或者一些成熟的性能测试工具（...
小程序追加数据的实现方法
weixin_33849215的博客
07-10 3608
index.wxml &lt;block wx:for="{{demoData}}" wx:for-item="item" wx:for-index="idx"&gt; &lt;view class="demos"&gt; &lt;view&gt;&lt;text&gt;测试的时间：&lt;/text&gt;&lt;text&a
微信小程序读取服务器多个数组,微信小程序wx:for循环多个嵌套数组
weixin_34380892的博客
08-05 1063
读取数据，数组下有多个数组：wxml页面上显示：wx:for="{{photo}}" wx:for-item="dayItem" wx:key="{{dayItem.id}}"wx:for="{{dayItem.color}}" wx:key="{{item.colorId}}"例子：view class="scroll_box" wx:for="{{photo}}" wx:for-item="d...
微信小程序wx:for循环的实例详解
10-17
微信小程序的`wx:for`循环是用于列表渲染的关键特性，它允许开发者通过绑定一个数组来重复渲染组件，展示动态数据。以下是对`wx:for`循环的详细说明： 1. **基本用法**： - `wx:for`属性需要绑定到一个数组，数组...
微信小程序的数组添加、wx:for循环、删除、显示与隐藏，可以记录每一件事情
07-20
`wx:for`是微信小程序用于遍历数组并渲染列表的指令。其语法结构如下： ```html <block wx:for="{{items}}" wx:key="*this"> <view>{{item.content}} ``` 这里，`items`是你要遍历的数组，`item`是当前循环...
小程序 wx:for循环生成多个input实现动态增减，并获取每个input的输入数据
qq_44154410的博客
03-24 3432
最近在和同学写小程序，记录一下，在同学代码的基础上略微改了改，感谢俺的同学。 wxml <block wx:for="{{ list }}" wx:key="index"> <view> <van-field bind:change="onDepartmentChange" data-name="depName" data-id="{{ ...
微信小程序block的使用教程
08-27
主要介绍了微信小程序block的使用 ,微信小程序最近非常火热，实现起来也很简单，只要block就可以实现，需要的朋友可以参考下
微信小程序点击按钮获取数据（wx：for）
qq_51632935的博客
08-10 4897
微信小程序点击按钮获取响应的数据
微信小程序学习之路（二） 循环添加信息块
weixin_39070579的博客
09-25 494
有时候，我们可能会需要这样一个功能，即把数据库里的信息按照条目一条一条展示出来，类似于这样，两条或者更多，即数据库读出来有多少条数据，就展示出多少条数据 这就离不开block了. block仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。 因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签...
小程序开发笔记-block，wx:for等知识
xuyoujia1991的博客
11-04 791
小程序笔记 今天完成小程序的商户信息列表和详情页面的开发。涉及到的空间有{{items.value1}}{{item.value2}}…… wx:for中是js中data传过来的参数，这个参数就是一个数组[1,2,3,4,5],而item就是其中的1，2，3，4…… 涉及到的方法 wx.request请求方法：参数有url,header,success,fail setTimeout(()=>{ })：进行延时方法 onPulldownRefresh方法:当用户进行下拉操作的时候触发
微信小程序之循环<block></block>
weixin_30552635的博客
06-29 401
（1）<block></block>标签 block常用于结合循环 <block wx:for="{{array}}" wx:key="{{index}}"> <view class="aaa">{{item}}</view> </block> array: [1, 2, 3, 4, 5] ...
【微信小程序】基础篇 -- WXML 模板语法 - 列表渲染 -- wx:for & wx:key（十二）
最新发布
JMFive的博客
02-28 7984
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第12篇文章;今天开始学习微信小程序的第八天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。不知不觉已经学习微信小程序八天了，估计大佬们一天就学完这些内容了吧，我还在慢吞吞的学完，然后在看官方文档总结写写文章。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。
微信小程序开发之——列表渲染-wxfor
我的博客
10-20 6264
一 概述 wx:for可以用在view上，也可以用在block上 在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件 默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item 使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名 如果列表中项目的位置会动态改变或者有新的项目添加到列表中，需要使用 wx:key 来指定列表中项目的唯一的标识符 二 wx:for渲染列表 2.
【微信小程序】列表渲染wx:for
m0_55394328的博客
11-22 4661
哈喽大家好，本期是微信小程序专栏第十二期，本期我们将学习列表渲染wx:for。注意：每期内容是连载呢，建议大家可以看看往期内容，更好理解噢~以上就是今天的学习内容啦~如果有兴趣的话可以订阅专栏，持续更新呢~咱们下期再见~
【小程序】block标签的介绍和使用
热门推荐
wangjia55的专栏
05-26 7万+
转自：https://blog.csdn.net/qq_36530458/article/details/79778373&lt;block/&gt; 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 &lt;block/&gt; 标签将多个组件包装起来，并在上边使用...
微信小程序wx:for循环实战指南
这个实例详细展示了如何在微信小程序中使用 `wx:for` 进行数据遍历，同时涵盖事件处理、数据交互以及服务器通信，对于初学者来说是一个很好的学习资源。理解并熟练运用这些技术，能够帮助开发者构建更加动态和交互...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值