发现问题
对于在双重循环中需要在内层循环中访问外层循环的数据的情况，可以使用 wx:for-item 指令来为外层循环的变量指定一个新的名称。
如下，展示了如何解决双重循环中的变量名冲突问题，并在内层循环中访问外层循环的数据：
<block wx:for="{
{outerList}}" wx:for-item="outerItem" wx:key="index">
<view>外层循环变量：{
{
outerItem}}</view>
<block wx:for="{
{outerItem.innerList}}" wx:key="index">
<view>内层循环变量：{
{
item}}，外层循环变量：{
{
outerItem}}</view>
</block>
</block>
咱通过使用 wx:for-item 指令将外层循环的变量名指定为 outerItem，就可以在内层循环中使用 outerItem 来访问外层循环中的数据啦。
这样做可以避免变量名冲突，并使你能够方便地在内层循环中访问外层循环的数据。
模拟数据，解决问题
假设有一个电商平台，需要展示多个商品分类下的商品列表。每个分类下都有多个商品，而且需要在模板中进行双重循环渲染。
为了解决循环命名和索引冲突的问题：
外层循环：使用 wx:for 指令指定外层循环的数据源，并定义一个外层循环的索引变量，如 outerIndex。
内层循环：在外层循环的内部使用 wx:for 指令指定内层循环的数据源，并定义一个内层循环的索引变量，如 innerIndex。
命名冲突：为了避免命名冲突，可以使用有意义的不同变量名来表示不同层级的循环项，比如外层循环的变量名为 category，内层循环的变量名为 product。
假设我们有以下的数据结构表示电商平台的商品分类和商品列表（实际是要来自后端）：
const categories = [
{
id: 1,
name: '电子产品',
products: [
{
id: 11, name: '手机' },
{
id: 12, name: '电视' },
{
id: 13, name: '笔记本电脑' }
]
},
{
id: 2,
name: '家居用品',
products: [
{
id: 21, name: '沙发' },
{
id: 22, name: '床' },
{
id: 23, name: '餐桌' }
]
}
];
现在我们来对这个数据结构进行代码重构，确保在渲染模板时能够避免命名和索引冲突的问题：
<block wx:for="{
{categories}}" wx:for-item="category" wx:key="category.id">
<view>{
{
category.name}}</view>
<block wx:for="{
{category.products}}" wx:for-item="product" wx:key="product.id">
<view>{
{
product.name}}</view>
</block>
</block>
如上，我们使用了wx:for-item指令来为外层循环的变量命名为category，并为内层循环的变量命名为product。通过给每个循环项添加唯一的key值，这里使用了商品的id来作为 key。这样就确保了在渲染模板时，不会出现命名和索引的冲突。
假设商城里有一个书本分类的列表渲染需求
假设从后端得到如下数据结构
const bookCategories = [
{
id: 1,
name: '小说',
subcategories: [
{
id: 11,
name: '爱情小说',
subcategories: [
{
id: 111,
name: '现代言情',
books: [
{
id: 1111, title: '小时代' },
{
id: 1112, title: '步步惊心' }
]
},
{
id: 112,
name: '古装言情',
books: [
{
id: 1121, title: '红楼梦' },
{
id: 1122, title: '倾城之恋' }
]
}
]
},
{
id: 12,
name: '科幻小说',
subcategories: [
{
id: 121,
name: '星际战争',
books: [
{
id: 1211, title: '银河系漫游指南' },
{
id: 1212, title: '三体' }
]
},
{
id: 122,
name: '未来世界',
books: [
{
id: 1221, title: '1984' },
{
id: 1222, title: '机器人时代' }
]
}
]
}
]
},
{
id: 2,
name: '非小说类',
subcategories: [
{
id: 21,
name: '历史',
books: [
{
id: 211, title: '中国古代历史' },
{
id: 212, title: '世界现代史' }
]
},
{
id: 22,
name: '哲学',
books: [
{
id: 221, title: '人类简史' },
{
id: 222, title: '道德经' }
]
}
]
}
];
具体解决思路如下
我们使用了多个嵌套的 wx:for 循环来处理多重嵌套的书本分类结构。我们为每个循环层级的变量指定了不同的名称，以避免命名冲突。同时，我们使用了 wx:if 条件指令来处理可选的子分类和书本列表，以确保只有存在对应数据时才渲染相应的内容。
<block wx:for="{
{bookCategories}}" wx:for-item="category" wx:key="category.id">
<view>{
{
category.name}}</view>
<block wx:if="{
{category.subcategories}}">
<block wx:for="{
{category.subcategories}}" wx:for-item="subcategory" wx:key="subcategory.id">
<view>{
{
subcategory.name}}</view>
<block wx:if="{
{subcategory.subcategories}}">
<block wx:for="{
{subcategory.subcategories}}" wx:for-item="nestedSubcategory" wx:key="nestedSubcategory.id">
<view>{
{
nestedSubcategory.name}}</view>
<block wx:if="{
{nestedSubcategory.books}}">
<block wx:for="{
{nestedSubcategory.books}}" wx:for-item="book" wx:key="book.id">
<view>{
{
book.title}}</view>
</block>
</block>
</block>
</block>
<block wx:if="{
{subcategory.books}}">
<block wx:for="{
{subcategory.books}}" wx:for-item="book" wx:key="book.id">
<view>{
{
book.title}}</view>
</block>
</block>
</block>
</block>
<block wx:if="{
{category.books}}">
<block wx:for="{
{category.books}}" wx:for-item="book" wx:key="book.id">
<view>{
{
book.title}}</view>
</block>
</block>
</block>
