微信小程序 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    })  }})