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
})
}
})