Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >微信小程序 js中遍历list

微信小程序 js中遍历list

作者头像
yechaoa
发布于 2022-06-10 05:14:04
发布于 2022-06-10 05:14:04
4.9K00
代码可运行
举报
文章被收录于专栏:移动开发专栏移动开发专栏
运行总次数:0
代码可运行

wxml 遍历用 wx:for

JS

方式一:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
for (var index in res.data) {
	title : res.data[index].title
 }
  • res.data:数组
  • index:下标
  • title:数组中的一个字段
方式二:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
for (var i = 0; i < datas.length; ++i) {
  console.log(i);
  console.log(datas[i].name);
}
  • datas:数组
  • datas.length:数组长度
方式三:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
yourData.forEach(function(item, index){
	console.log(item); 
	console.log(index); 
})
  • yourData:你的数组对象
  • item:单个对象

wxml

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="item">
  {{item.message}}
</view>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-08-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
小程序系列 - 1.小程序组成
数据绑定 # js Page({ /** * 页面的初始数据 */ data: { time: (new Date()).toString() }, }) ​ # wxml <text>当前时间:{{time}} </text> ​ ​ # 属性动态改变 <text data-test="{{test}}"> hello world</text> ##需要注意的是变量名是大小写敏感的,也就是说 {{name}} 和 {{Name}} 是两个不同的变量。 条件
程序员海军
2021/10/10
2.7K0
微信小程序 开发笔记
参考:https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
yiyun
2022/04/01
5340
微信小程序 开发笔记
微信小程序开发笔记
  因为前段时间一直在做关于微信小程序方面的项目,作为一名后端的攻城狮而言做一些简单的前端页面数据操作和管理还是比较容易快上手的,当然前提是要理解微信小程序的基本语法和请求原理。该篇博客主要记录的是在编写微信小程序时使用比较频繁,实用的一些方法和一些基本原理的概括。个人觉得把这些方法掌握好了,开发一个小型的微信小程序那是绰绰有余的啦。当然我这里并没有深入的对一些语言进行详细的概述,纯属个人总结,假如需要详细的微信小程序语法文档请移驾到:[https://developers.weixin.qq.com/miniprogram/dev/]
追逐时光者
2019/08/28
2.1K0
微信小程序开发笔记
全栈开发工程师微信小程序-下
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。
达达前端
2019/07/03
7660
全栈开发工程师微信小程序-下
全栈开发工程师微信小程序-中(下)
wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元.
达达前端
2019/07/03
5510
微信小程序的动态表单,实现房屋租赁的多租客录入
本文将介绍如何使用微信小程序编写动态表单,最终实现房屋租赁系统中多租客录入的业务。
Designer 小郑
2023/08/01
4170
微信小程序的动态表单,实现房屋租赁的多租客录入
小程序笔记篇
豆瓣top250的数据https://api.douban.com/v2/movie/top250
达达前端
2019/07/03
6540
小程序笔记篇
小程序基础知识点讲解-WXML + WXSS + JS,生命周期
查看官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/
达达前端
2019/07/03
1.8K0
小程序基础知识点讲解-WXML + WXSS + JS,生命周期
微信小程序实战–集阅读与电影于一体的小程序项目(五)
21.电影页面数据绑定 movies.js var app = getApp(); Page({ data: { inTheaters: {}, comingSoon: {}, top250: {}, }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var baseUrl = app.globalData.g_baseUrl; var inTheatersUrl = base
zhang_derek
2018/08/30
7130
微信小程序实战–集阅读与电影于一体的小程序项目(五)
开发|走进小程序(三)
前一篇博客为大家简单的讲解了一下关于一个简单的电商小程序的首页和分类页面的制作。这篇博客呢,继续为大家讲解后面搜索页、详情页、购物车页面的制作。
算法与编程之美
2019/07/17
8920
微信小程序入门《二》实例:条件渲染、数据遍历、网络请求、获取本地图片
实例内容 条件渲染 数据遍历 网络请求 获取本地图片 实例一: 条件渲染 如果motto为Hello World,则输出你好世界,否则原样输出。 这里是分支条件判断,直接在视图文件里修改,修改inde
极乐君
2018/02/05
1.8K0
微信小程序入门《二》实例:条件渲染、数据遍历、网络请求、获取本地图片
【愚公系列】2022年02月 微信小程序-wx:for的使用
在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
愚公搬代码
2022/12/01
1K0
【愚公系列】2022年02月 微信小程序-wx:for的使用
微信小程序继续入坑指南
上方完成了一次列表渲染,其中index为默认的遍历到的数组的小标,从0开始,item为当前遍历到的数组对应下标的元素。
mySoul
2018/08/29
6910
微信小程序复习巩固 —— (wxml,wxss、js、wx:if、wx:for)
之前学了 vue2.5,并且做了一个模仿 去哪网界面,越是学的后面,越是发现 vue 的语法和微信小程序的语法是非常相似,这次把微信小程序基础重新捡起来,毕竟从去年暑假学完小程序到现在过去了挺长时间的,这次基础语法迅速过一遍,就开始做项目了,冲冲冲
Gorit
2021/12/09
1.2K0
微信小程序复习巩固 —— (wxml,wxss、js、wx:if、wx:for)
「小程序」开发记录
标签严格闭合。 rpx(responsive pixel)尺寸单位。 大小写敏感。
AnRFDev
2021/02/01
6.4K0
「小程序」开发记录
☀️苏州程序大白一文教你学会微信小程序开发☀️《❤️记得收藏❤️》
3、与data同级 并且可以将input中输入的值与data中定义的属性绑定,使用this.setData({属性:e.detail.value})。
苏州程序大白
2021/09/29
9560
「小程序JAVA实战」小程序视图之细说列表渲染(14)
列表的渲染,不管是任何语言都有列表这个概念。源码:https://github.com/limingios/wxProgram.git 中的No.8 小程序的列表的渲染 for 循环 view wx:
IT架构圈
2018/12/21
4080
【微信小程序+Python后台从0到1实战开发】02微信小程序基础事件及数据获取
day02 微信小程序 1. 跳转 1.1 对标签绑定点击事件 <view bindtap="clickMe" data-nid="123" data-name="SD" >点我跳转</view> Page({ ... /** * 点击绑定的事件 */ clickMe:function(e){ var nid = e.currentTarget.dataset.nid; console.log(nid); } }) 1.2 页面跳转 wx.navigateTo({
天道Vax的时间宝藏
2021/08/11
1.1K0
微信小程序截取数组每三个为一组渲染
后端将一个数组传给我们,需求要把它们进行切割在进行展示,还有自定义swiper指示点,都会在代码里进行输写
明知山
2020/09/03
1.3K0
微信小程序实战开发二:微信小程序 WEUL组件之 画廊组件
官方地址:https://developers.weixin.qq.com/miniprogram/dev/extended/weui/gallery.html
睿儿网络郝刚
2020/09/08
2.3K0
微信小程序实战开发二:微信小程序 WEUL组件之 画廊组件
推荐阅读
相关推荐
小程序系列 - 1.小程序组成
更多 >
LV.1
阿里巴巴技术专家
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验