微信小程序 - 循环

小迷糊的学习记录2024-03-22 20:52

前言

前端代码编写中，循环的使用是必不可少的，只要有相似内容的列表存在，大概率就会使用到循环，如：商品列表、每月收益、排行榜等。

数组/列表循环

使用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>