This article introduces the types of cyclic data structures that will generally appear. There are deeper ones that can be taken out separately for cyclic processing.
Not much nonsense, the code:
index.wxml
<view class="page">
<view class="title">各种循环</view>
<!-- 第一种 -->
<view class="one">
<view wx:for="{
{arr}}">{
{
item}}</view>
</view>
<!-- 第二种 -->
<view class="two">
<view wx:for="{
{arr2}}" wx:key="index">{
{
item.name}}今年{
{
item.age}}岁</view>
</view>
<!-- 第三种 -->
<view class="three">
<view wx:for="{
{arr3}}" wx:key="index">{
{
item.name}}今年{
{
item.age}}岁，出差过
<text wx:for="{
{item.address}}" wx:for-item="address" wx:key="{
{address}}">{
{
address.ly}}</text>
</view>
</view>
<!-- 第四种 -->
<view class="four">
<view wx:for="{
{arr4}}" wx:key="index">{
{
item.name}}今年{
{
item.age}}岁，
<text>{
{
item.userinfo.ff == 0 ? '未婚': '已婚'}}</text>
<text>{
{
item.userinfo.sg}}cm</text>在
<text wx:for="{
{item.address}}" wx:for-item="address" wx:key="{
{address}}">{
{
address.ly}}</text>工作过
</view>
</view>
</view>
index.wxss
.page{
padding: 0 20rpx;
}
.title{
font-weight: 36rpx;
font-weight: bold;
color: #333;
text-align: center;
line-height: 88rpx;
}
.one,.two,.three,.four{
font-weight: 28rpx;
line-height: 56rpx;
background-color: rgb(142, 194, 255);
margin-bottom: 30rpx;
}
index.js
Page({
data: {
arr:['张三','李四','赵五'],
arr2: [
{
name:'张三',age: 20},
{
name:'李四',age: 21},
{
name:'赵五',age: 22}
],
arr3: [
{
name:'张三',age: 20,address:[
{
ly:'湖北省'},
{
ly:'河南省'}
]},
{
name:'李四',age: 21,address:[
{
ly:'山东省'},
{
ly:'河南省'}
]},
{
name:'赵五',age: 22,address:[
{
ly:'浙江省'},
{
ly:'河南省'}
]}
],
arr4: [
{
name:'张三',age: 20,userinfo:{
ff:0,
sg:180
},address:[
{
ly:'北京'},
]},
{
name:'李四',age: 21,userinfo:{
ff:0,
sg:178
},address:[
{
ly:'上海'},
]},
{
name:'赵五',age: 22,userinfo:{
ff:0,
sg:168
},address:[
{
ly:'浙江'},
]}
],
},
})
Display example:
Note 2:
Seeing the data returned to me by this backend, it was a bit confusing at first. Record how it was done
. The picture above is the effect picture of the realization.
//js代码
success: (res) => {
if (res.code == 200) {
var subjectArray = []
for(var idx in res.data) {
var temp = {
subjectName: idx,
professionArray: res.data[idx]
}
subjectArray.push(temp)
}
that.setData({
bookList: subjectArray
})
}
}
// subjectName这里代表前面的时间
// professionArray代表后面的数组内容(每一个菜)
Below is the code of the page
<view class="box">
<view class="itemtoday" wx:for="{
{bookList}}" wx:key="index">
<view class="top-time">{
{
item.subjectName}}</view>
<view class="bottom-cook">
<view class="cookItem" bind:tap="showCook" wx:for="{
{item.professionArray}}" wx:for-item="professionitem" wx:key="{
{professionitem}}" data-id="{
{professionitem.id}}" >
<image class="Img" src="{
{professionitem.url}}" mode="aspectFill" lazy-load="false" binderror="" bindload="" />
<view class="left">{
{
professionitem.name}}</view>
</view>
</view>
</view>
</view>