微信小程序wx:for和wx:for-item的用法详解

2024-12-06 14:43:50

wx:for="{{list}}"用来循环数组，而list即为数组名wx:for-item="items" 即用来定义一个循环过程中每个元素的变量的

如果是一维数组,按照如下方式循环出来：

<view wx:for="{{list}}">
{{index}} {{item.name}}
</view>

以上代码中，item即为list的别名。

如果是二维甚至多维数组，按照如下方式循环：

<view wx:for="{{parentList}}">
{{item.id}}
<view wx:for="{{item.childList}}" wx:for-item="items">
{{items.name}}{{item.account}}
</view>
</view>
for (var i = 0 ; i < list.length; i++) {
var xxx = list[i];
}

等同于

<view wx:for="{{list}}" wx:for-item="xxx"></view>

谨记：wx:for是循环数组，wx:for-item即给列表赋别名

以下为几个错误使用，请大家谨慎使用：

1.直接用wx:for-item ，这样是循环不出来列表的

<view wx:for-item="{{list}}">
{{index}} {{item.name}}
</view>

2.子循环中慎用wx:for-item

<view wx:for="{{parentList}}">
 {{item.id}}
 <view wx:for-item="{{item.childList}}" wx:for-item="items">
 {{items.name}}{{items.account}}
 </view>

微信小程序wx:for和wx:for-item的正确用法

wx:for="{{list}}"用来循环数组，而list即为数组名wx:for-item="items" 即用来定义一个循环过程中每个元素的变量的

如果是一维数组,按照如下方式循环出来：

<view wx:for="{{list}}">
{{index}} {{item.name}}
</view>

以上代码中，item即为list的别名。

如果是二维甚至多维数组，按照如下方式循环：

<view wx:for="{{parentList}}">
{{item.id}}
<view wx:for="{{item.childList}}" wx:for-item="items">
{{items.name}}{{item.account}}
</view>
</view>
for (var i = 0 ; i < list.length; i++) {
var xxx = list[i];
}

等同于

<view wx:for="{{list}}" wx:for-item="xxx"></view>

谨记：wx:for是循环数组，wx:for-item即给列表赋别名

以下为几个错误使用，请大家谨慎使用：

1.直接用wx:for-item ，这样是循环不出来列表的

<view wx:for-item="{{list}}">
{{index}} {{item.name}}
</view>

2.子循环中慎用wx:for-item

<view wx:for="{{parentList}}">
 {{item.id}}
 <view wx:for-item="{{item.childList}}" wx:for-item="items">
 {{items.name}}{{items.account}}
 </view>

总结

以上所述是小编给大家介绍的微信小程序wx:for和wx:for-item的用法详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

您可能感兴趣的文章:

微信小程序 wx:for的使用实例详解

微信小程序 wx:for的使用实例详解

微信小程序 wx:for的使用实例详解在小程序的开发过程中,经常会用到在前端页面循环打印一个数组或者对象的数据,这样的话就需要用wx:for来实现. 一般情况下,小程序的utils这个文件夹下,我们可以把本地的数据写进去,封装成.js文件,提供对外暴露的接口,然后读取本地数据,这些在上一篇博客中有详细介绍.我们最后说到写好的本地数据可以另一个页面读取: var fileData = require('../../utils/data.js') Page({ data: { showData:
微信小程序：数据存储、传值、取值详解

小程序界面传值父级界面:A界面子级界面:B界面一.url传值详细的配置参数可以查看组件导航:navigator,这里不再做过多的解释. 1. 正向传值:A界面 –>B界面用 navigator标签或 wx.navigator传值,A界面向B界面传id值 A界面获取id值传向B界面如果需要传多个参数, 用 & 链接即可 // 方法一:navigator标签传值 <navigator url="/page/index/index?id=110" >传值&
微信小程序之高德地图多点路线规划过程示例详解

调用如何调用高德api? 高德官方给出的https://lbs.amap.com/api/wx/summary/开放文档比较详细: 第一步,注册高德开发者第二部,去控制台创建应用即点击右上角的控制平台创建应用创建应用绑定服务记得选择微信小程序:同时在https://lbs.amap.com/api/wx/gettingstarted中下载开发包第三步,登陆微信公众平台在开发设置中将高德域名配置上 https://restapi.amap.com 第四步,打开微信开发者工具,打开微信小程
微信小程序中button组件的边框设置的实例详解

微信小程序中button组件的边框设置的实例详解 button的边框是用:after方式实现的,用户如果在button上定义边框会出现两条线,需用:after的方式去覆盖默认值. 如果设置了Button的背景色,没有用:after设置边框的颜色,则button的四个角会出现模糊的尖角.如下图所示: 如上图四个角会模糊..wxss代码如下: .clickEncryptBtn{ width:130px; border-radius: 3px; margin:20px auto; padding-to
微信小程序引用公共js里的方法的实例详解

微信小程序引用公共js里的方法的实例详解一个小程序页面由四个文件组成,一个小程序页面的四个文件具有相同路径与文件名,由此我们可知一个小程序页面对应着一个跟页面同名的js文件.可是当有些公共方法,我们想抽离出来成为一个独立公共的js文件.我们该如何实现呢. 在根目录下有一个app.js文件.这个根目录的js 文件我们可以通过getApp()轻松调用. //app.js App({ globaData:'huangenai' }) //test.js var app = getApp(); Pag
微信小程序动态的设置图片的高度和宽度详解及实例代码

微信小程序图片等比例缩放动态的获取图片的高度和宽度动态的设置图片的高度和宽度前言: 在小程序布局中,如果图片不是固定高度和高度,但image设置的是固定的高度和宽度,这时候原始图片相对image设置的固定高度和宽度不是等比例大小,那么这张图片就会变形,变的不清晰.这时就可以使用下面的等比例缩放的方式缩放图片,让图片不变形.或者通过image的bindload方法动态的获取图片的高度和宽度,动态的设置图片的高度和宽度,是图片布局的高度和宽度和原始图片的高度和宽度相等. 1.图片等比例缩放工具
微信小程序授权获取用户详细信息openid的实例详解

小程序获取用户的头像昵称openid之类第一种使用wx.getUserInfo直接获取微信头像,昵称 wx.getUserInfo({ success: function (res) { that.setData({ nickName: res.userInfo.nickName, avatarUrl: res.userInfo.avatarUrl, }) }, }) 第二种我们在使用小程序wx.login API进行登录的时候,直接使用wx.getUserInfo是不能获取更多的信息的,如
微信小程序连续旋转动画（this.animation.rotate）详解

微信小程序连续旋转动画一..js中封装旋转动画方法添加animation属性 data:{ animation:''" } 改变animation的值(官网提供角度范围是-180~180,但是我发现角度越大会一直旋转) onShow: function() { console.log('index---------onShow()') this.animation = wx.createAnimation({ duration: 1400, timingFunction: 'linear'
微信小程序教程之本地图片上传(leancloud)实例详解

微信小程序 leancloud --本地图片上传由于本站最近学习微信小程序的知识,这里记录下微信小程序实现本地上传的功能实现方法,以下是网上找的资料,大家看下. 将本地图片上传至leancloud后台. 获取本地图片或者拍照,我在上一篇博文中写过.这里就不说了.我的博客直接上代码: 1.index.js //index.js //获取应用实例 var app = getApp() const AV = require('../../utils/av-weapp.js'); Page({ da
微信小程序页面跳转传递值几种方法详解

微信小程序页面跳转传递值微信小程序导航有两种形式:一种是在写在js中进行跳转,另一种是写在wxml页面中进行跳转. 1.js导航 (1).wx.navigateTo(OBJECT) :保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. wx.navigateTo({ url: 'test?id=1' }) 获取传递的值: //test.js Page({ onLoad: function(option){ console.log(option.id)
微信小程序图片轮播组件gallery slider使用方法详解

本文实例为大家分享了微信小程序图片轮播组件的具体代码,供大家参考,具体内容如下先上效果图: wxml <scroll-view scroll-y="true" style="height:200px" class="page-body" bindscrolltolower="loadMore"> <view class="swiper"> <swiper class=&quo

微信小程序wx:for和wx:for-item的用法详解

您可能感兴趣的文章:

相关推荐

随机推荐