前言
前端代码编写中,循环的使用是必不可少的,只要有相似内容的列表存在,大概率就会使用到循环,如:商品列表、每月收益、排行榜等。
数组/列表循环
使用wx的特殊语法来实现循环功能。
wx:for = "{{循环的列表(数组/对象)}}"
wx:for-item = "循环项的名称"
wx:for-index = "循环项的索引"
.js 文件:
Page:{
selectedGoods:[
{name:'商品1',salePrice:100,originPrice:390,desc:'特价促销'},
{name:'商品2',salePrice:130,originPrice:300,desc:'买一赠一'},
{name:'商品3',salePrice:80,originPrice:200,desc:'甩货处理'},
]
}
.wxml 文件:
<block class="my_draw_canvas"
wx:for="{{selectedGoods}}"
wx:for-item="item"
wx:for-index="index">
<view>{{index}}</view>
<view>{{item.name}}</view>
<view>{{item.salePrice}}</view>
<view>{{item.originPrice}}</view>
<view>{{item.desc}}</view>
</block>
结果:
0
商品1
100
390
特价促销
1
商品2
130
300
买一赠一
2
商品3
80
200
甩货处理
注意⚠️:循环语句是固定的,要保证对象的唯一性,即wx:(循环) = "(循环值)",定了循环值,循环的就是循环值的内容。
当出现数组的嵌套循环的时候,要注意以下绑定的名称不要重名
wx:for-item="item"
wx:for-index="index"
对象循环
循环语句同数组/列表循环语句相同。
wx:for="{{数组或者对象}}"
wx:for-item="对象的值"
wx:for-index="对象的属性"
循环对象时可以根据对象的键值对对item、index赋值,如:可以把item和index的名称都修改为
wx:for-item="value"
wx:for-index="key
多层嵌套循环的情况下,在每一个view层级下再使用循环即可。注意:循环嵌套要更改item、index对应的值,另起一个单词。
<view wx:if="{{profitSum}}" class="hava-profit">
<view class="profit-content"
wx:for="{{list}}"
wx:for-item="value"
wx:for-index="key">
<view class="profit-title">({{key}}月)</view>
<view class="profit-num">
<text class="tip">合计</text>
<text class="sum">{{(总计金额)}}</text>
</view>
<image class="icon" src="(网址/分割线)"></image>
<view class="goods_content"
wx:for="{{value}}"
wx:for-item="goodsProfit"
wx:for-index="goodsName">
<text class="goods_name">{{goodsName}}</text>
<text class="goods_progit">{{goodsProfit}}</text>
</view>
</view>
</view>