微信小程序 wx：for循环和数组内部元素的增加

wx:for循环实现自动换行：
wxss文件内

flex-wrap: wrap;

wx:for 循环的内容

<view class="menu_item" wx:for="{{menus}}" wx:for-index="idx" wx:for-item="menus" wx:key="menus">
      <image class="menu_icon" src="/icons/blue.png"></image>
      <text class="menu_name">{{menus.name}}</text>
      <switch type="switch" class="switch" checked="true"/>
    </view>

如果没有wx:key会有黄色警示

随循环图形移动按钮的实现：

<view class="part_2">
    <view class="menu_item" wx:for="{{menus}}" wx:for-index="idx" wx:for-item="menus" wx:key="menus">
      <image class="menu_icon" src="/icons/blue.png"></image>
      <text class="menu_name">{{menus.name}}</text>
      <switch type="switch" class="switch" checked="true"/>
    </view>//同上面的循环
    <view class="menu_item">//下部不是循环，但是属于父类view，仍然会自动换行
    <image class="next" src="/icons/add.png" bindtap="addicons"></image>
      <text class="menu_name">增加餐桌</text>
    </view>
  </view>

wxss文件

.part_2 {
  position: absolute;
  top: 206px;
  height: 300px;
  width: 330px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.menu_item {
  height: 150px;
  width: 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  box-sizing: border-box;
  padding-bottom: 10px;
  padding-top: 10px;
}

.menu_name{
font-family: "幼圆";
font-size: large;
position: relative;
top: 5px;
color: #A9A9A9;
}

.menu_icon{
  width: 70px;
  height: 60px;
}

.switch{
  position: relative;
  top: 10px;

}

.next{
  width: 60px;
  height: 60px;
  justify-content: center;
}

js文件：实现点击来增加数组元素实现图片文字的循环增加

var i=0;
var array=[];
Page({
  data: {
    number:0,
    motto: "Hello World",
    userInfo: {},
    menus:[ 
    ],
  },
  addicons:function(e){
    console.log("正在执行增添餐桌操作");
    i++;
    var obj={};
    obj.id=i;
    obj.name=i+"号桌"
    array.push(obj);
    console.log(array);
    this.setData({
      "menus": array
    })
  }
})