小法式wx-for嵌套

世博会海宝兄

来历：知乎



前序

微信小法式前端wx-for，界说了可循环结构，用于静态绑定序列化数据。js端供给的是JSON结构工具用于绑定。宫格块就是个例子，用一次wx-for即可。偶然辰会需要wx-for嵌套处理更复杂的循环。wx-for嵌套了解起来有点困难，此次给个例子。
<hr/>实现结果以下所示。风雅框是第一层模块结构，小方框是大的模块里面的第二层模块结构：


<hr/>index.wxml

index.wxml代码以下：
<view wx:for="{{OneArray}}" wx:for-item="OneModuleObj" wx:key="i">
  <view class="HorizotalLine"></view>
  <view class="MainTitle" >
    {{OneModuleObj.title}}
  </view>
  <block wx:for="{{OneModuleObj.TowArray}}"  wx:for-item="TwoModuleObj" wx:key="j">
    <view class='prodView'>
      <view class='prodItemView'>
        <image class='prodImage' src="{{TwoModuleObj.src}}" />
        <text class='prodText'>{{TwoModuleObj.text}}</text>
      </view>
    </view>
  </block>
</view>
{{OneArray}}、{{OneModuleObj.TowArray}}：代表第1层、第2层循环绑定的工具数组称号，在js中有对应。
wx:for-item="OneModuleObj"、wx:for="{{OneModuleObj.TowArray}}"：OneModuleObj、TwoModuleObj，1层循环、2层循环各项的工具称号，这样写主如果为了和js对应。默以为item。比如写成以下：
<view wx:for="{{OneArray}}" wx:for-item="item" wx:key="i">
  <view class="HorizotalLine"></view>
  <view class="MainTitle" >
    {{item.title}}
  </view>
  <block wx:for="{{item.TowArray}}"  wx:for-item="item" wx:key="j">
    <view class='prodView'>
      <view class='prodItemView'>
        <image class='prodImage' src="{{item.src}}" />
        <text class='prodText'>{{item.text}}</text>
      </view>
    </view>
  </block>
</view>这样也是可以的，js中并没出现item这个词，但能正确运转，正由于以item默许指定循环数组的各项。假如改成item1、item2就不可了。
OneModuleObj.title：取出第一层循环属性title的值。
TwoModuleObj.text：取出第二层循环属性text的值。
block：界说块，需要留意的是此处假如用view的话，不能实现横向排列，因view都是纵向排列的。
至于wx:key="i"，这里没有用上其中的感化。
<hr/>index.wxss

界说页面元素的款式。index.wxss代码以下：
.MainTitle
{
  margin-top: 30rpx;margin-bottom: 0rpx;text-align: center;font-size: 50rpx;font-weight: bolder;
}

.HorizotalLine{
  height: 1px;background-color: lightgray;margin-left: 30rpx;margin-right: 30rpx;margin-top: 30rpx;

}
.prodView{
  width: 150rpx;margin:35rpx 0rpx 0rpx 0rpx;
  display:inline-flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-content:center;
  justify-content:space-around;
}
.prodItemView {
  width: 100rpx;
  text-align: center;
}
.prodImage {
  width: 85rpx;
  height: 85rpx;
}

.prodText {
  width: 150rpx;
  margin-top: 20rpx;
  font-size: 25rpx;
}
<hr/>index.js

index.wxss代码以下：
//index.js 力先示例
Page({
  onLoad: function () {
    const Class='printProductImages-印刷品-adProductImages-广告材料';   
    const ItemStr='visitingcard-名片-leaflet-宣传单-picturealbum-画册-membercard-会员卡-doubledraft-联单表格-adhesive-不干胶贴-envelope-信封-card-票券卡片-packet-封套-redpacket-红包喜帖-paperbag-纸袋纸盒-deskcalendar-台历挂历-sack-无纺布袋-adfan-广告扇'
    +'|'+
    'portrait-写真喷绘-displayrack-展架-rollupbanner-易拉宝-displayboard-展板-scroll-条幅横幅-colouredflags-彩旗-welcomebelt-迎宾带-workcard-工作牌-plaque-牌匾-signboard-标识-adword-广告字';
        
    var OneArray = [];
    var ModuleItemArray=ItemStr.split('|');
    var ClassArray=Class.split('-');
    var moduleLength=ModuleItemArray.length;
    for(var i=0;i<moduleLength;i++)
    {
      var OneModuleObj={};
      OneModuleObj.title=ClassArray[i*2+1];
      var TowArray = [];
      var PicPath=ClassArray[i*2];     
      var ItemArray=ModuleItemArray.split('-');
      var ItemArrayLength=ItemArray.length/2;
      for(var j=0;j<ItemArrayLength;j++)
      {
        var TwoModuleObj={};
        TwoModuleObj.src=PicPath+'/'+ItemArray[j*2]+'-'+ItemArray[j*2+1]+'.jpg';//改成现实
        TwoModuleObj.text=ItemArray[j*2+1];
        TowArray.push(TwoModuleObj);
      }
      OneModuleObj.TowArray=TowArray;
      OneArray.push(OneModuleObj);
    }
    console.log(OneArray);
    this.setData({
      OneArray: OneArray
    });
  },
})
机关JSON数组工具，将字符串朋分，赋值给JSON工具的各属性值，绑定到页面。
var OneArray =[]：界说顶层（第一层）的数组工具。与index.wxml中的{{OneArray}}对应。
var OneModuleObj={}：界说OneArray 数组的序列工具。
OneArray.push(OneModuleObj)：将界说的序列工具加入到数组OneArray中。
this.setData({OneArray: OneArray})：将前台的OneArray赋值以这里界说的OneArray数组。
输出成果为：


console.log(OneArray);
改成：
console.log(JSON.stringify(OneArray,null,2));
便可以获得OneArray的JSON结构化字符串。将该字符串间接写为工具也是可以的。以下代码：
//index.js
Page({
  OneArray:[
    {
      "title": "印刷品",
      "TowArray": [
        {
          "src": "printProductImages/visitingcard-名片.jpg",
          "text": "名片"
        },
        {
          "src": "printProductImages/leaflet-宣传单.jpg",
          "text": "宣传单"
        },
        {
          "src": "printProductImages/picturealbum-画册.jpg",
          "text": "画册"
        },
        {
          "src": "printProductImages/membercard-会员卡.jpg",
          "text": "会员卡"
        },
        {
          "src": "printProductImages/doubledraft-联单表格.jpg",
          "text": "联单表格"
        },
        {
          "src": "printProductImages/adhesive-不干胶贴.jpg",
          "text": "不干胶贴"
        },
        {
          "src": "printProductImages/envelope-信封.jpg",
          "text": "信封"
        },
        {
          "src": "printProductImages/card-票券卡片.jpg",
          "text": "票券卡片"
        },
        {
          "src": "printProductImages/packet-封套.jpg",
          "text": "封套"
        },
        {
          "src": "printProductImages/redpacket-红包喜帖.jpg",
          "text": "红包喜帖"
        },
        {
          "src": "printProductImages/paperbag-纸袋纸盒.jpg",
          "text": "纸袋纸盒"
        },
        {
          "src": "printProductImages/deskcalendar-台历挂历.jpg",
          "text": "台历挂历"
        },
        {
          "src": "printProductImages/sack-无纺布袋.jpg",
          "text": "无纺布袋"
        },
        {
          "src": "printProductImages/adfan-广告扇.jpg",
          "text": "广告扇"
        }
      ]
    },
    {
      "title": "广告材料",
      "TowArray": [
        {
          "src": "adProductImages/portrait-写真喷绘.jpg",
          "text": "写真喷绘"
        },
        {
          "src": "adProductImages/displayrack-展架.jpg",
          "text": "展架"
        },
        {
          "src": "adProductImages/rollupbanner-易拉宝.jpg",
          "text": "易拉宝"
        },
        {
          "src": "adProductImages/displayboard-展板.jpg",
          "text": "展板"
        },
        {
          "src": "adProductImages/scroll-条幅横幅.jpg",
          "text": "条幅横幅"
        },
        {
          "src": "adProductImages/colouredflags-彩旗.jpg",
          "text": "彩旗"
        },
        {
          "src": "adProductImages/welcomebelt-迎宾带.jpg",
          "text": "迎宾带"
        },
        {
          "src": "adProductImages/workcard-工作牌.jpg",
          "text": "工作牌"
        },
        {
          "src": "adProductImages/plaque-牌匾.jpg",
          "text": "牌匾"
        },
        {
          "src": "adProductImages/signboard-标识.jpg",
          "text": "标识"
        },
        {
          "src": "adProductImages/adword-广告字.jpg",
          "text": "广告字"
        }
      ]
    }
  ],
  onLoad: function () {

    this.setData({
      OneArray:this. OneArray
    });
  },
})
结语

本案例分析小法式wx-for两层嵌套的方式。关键就是wx:for-item的写法。多层嵌套可以参考此方式。




原文地址：https://zhuanlan.zhihu.com/p/612759293
免责声明：
1、文章部分图片源于收集，均为表示图；
2、一切文章、图片、音频视频文件等材料版权归版权一切人一切；
3、因非原创文章及图片等内容没法和版权者联系，如原作者或编辑以为作品不宜上网供阅读，或不应无偿利用，请实时告诉我们，以敏捷采纳适当办法，避免给双方形成不需要的经济损失；
4、本页面内容由爬虫法式自动收集于互联网，如无意中加害了媒体或小我的常识产权，请电邮【E-Mail:cb@yoyodoc.com】告之，我们将于24小时内删除。