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