详解微信小程序循环及嵌套循环

1. 微信小程序循环的语法

在实际应用中，我们经常需要在小程序中进行数据的循环展示，这时候就需要使用到小程序的循环语法。

下面是小程序循环语法的基本格式：

  <view wx:for="{{array}}" wx:for-item="itemName" wx:for-index="index">

    {{index}}: {{itemName.message}}
  </view>

其中array为要被循环的数据源，itemName为当前数据项，index为当前数据项的索引。

例如，如果我们要展示一个包含多条短信的列表，就可以使用以下代码：

  <scroll-view style="height: 500px" scroll-y>

    <view wx:for="{{messageList}}" wx:for-item="message" wx:for-index="index">
      <view class="message-item">
        <view class="message-content">{{message.content}}</view>
        <view class="message-time">{{message.time}}</view>
      </view>
    </view>
  </scroll-view>

这段代码会遍历messageList数组，依次生成包含每条短信内容和发送时间的列表项。

2. 微信小程序嵌套循环的语法

有时候我们需要在小程序中展示更为复杂的数据结构，例如包含多个分类的商品列表。

这时候就需要使用嵌套循环语法。下面是嵌套循环语法的基本格式：

  <view wx:for="{{categories}}" wx:for-item="category" wx:for-index="categoryIndex">

    <view><strong>{{category.name}}</strong></view>
    <view wx:for="{{category.goodsList}}" wx:for-item="goods" wx:for-index="goodsIndex">
      <view class="goods-item">{{goods.name}}</view>
    </view>
  </view>

这段代码中，我们首先遍历了一个categories数组，依次生成每个分类的标题。然后在每个分类内部，再次遍历该分类下的goodsList数组，生成每个商品的列表项。

2.1. 微信小程序嵌套循环样式的设置

虽然嵌套循环很实用，但是其样式设置比较繁琐。在上述例子中，我们需要为每个分类项设置一个标题样式，并为每个商品项设置一个列表项样式，这最终需要在CSS文件中写出以下代码：

  .goods-item {

    padding: 10px;
    border-bottom: 1px solid #eee;
  }
  .goods-item:last-child {
    border-bottom: none;
  }
  .goods-item:hover {
    background-color: #eee;
  }
  .message-item {
    padding: 10px;
    border-bottom: 1px solid #eee;
  }
  .message-item:last-child {
    border-bottom: none;
  }
  .message-content {
    font-weight: bold;
  }

我们可以看见，相似的样式代码在嵌套循环中会出现多次，这不仅增加了代码量，还容易引起不必要的麻烦。因此，我们可以使用数据绑定来简化样式的设置。

具体来说，我们把每个分类和商品的样式都定义在对应的数据项内部，例如：

  goodsList: [{

      name: "小米9T",
      desc: "4800万三摄 | 弹出全面屏 | 4000mAh大电池",
      price: 1599,
      imageUrl: "/images/xiaomi_9t.jpg",
      style: {
        itemClass: "goods-item",
        descClass: "goods-desc",
        nameClass: "goods-name",
        priceClass: "goods-price"
      }
    }]

这里，我们在每个商品的数据项内部添加了一个style属性，用于存放该商品的样式属性。同样的，分类也可以添加一个类似的属性。

在模板文件中，我们只需要将样式属性和类名绑定即可：

  <view wx:for="{{categories}}" wx:for-item="category" wx:for-index="categoryIndex">

    <view class="{{category.style.titleClass}}">{{category.name}}</view>
    <view wx:for="{{category.goodsList}}" wx:for-item="goods" wx:for-index="goodsIndex">
      <view class="{{goods.style.itemClass}}">
        <image class="{{goods.style.imageClass}}" src="{{goods.imageUrl}}"/>
        <view class="{{goods.style.nameClass}}">{{goods.name}}</view>
        <view class="{{goods.style.descClass}}">{{goods.desc}}</view>
        <view class="{{goods.style.priceClass}}"><strong>{{goods.price}}元</strong></view>
      </view>
    </view>
  </view>

这样一来，样式代码就被隐藏在数据层里了，大大简化了代码量的同时，也提高了代码的可读性和可维护性。