解决方案:
<view class="uni-slsct"> // 父元素
<view class="uni-slsct_children" v-for="(item,index) in buttonList" :key="index" @click="intoBotton(item.id,item.textButton)"> //子元素
<image class="uni-image" :src="item.Image" mode=""></image>
<text class="uni-textB">{{item.textButton}}</text>
</view>
<view class="uni-slsct_children" v-for="item in (row-buttonList.length%row)" v-if="buttonList.length%row>0"> //要添加的子元素
</view>
</view>
data() {
return {
row:4,//每行显示数量
buttonList:[{ // 循环的子元素
Image:"../../static/logo.png",
textButton:"领料",
id:"1"
},{
Image:"../../static/logo.png",
textButton:"烘料",
id:"2"
},{
Image:"../../static/logo.png",
textButton:"上模",
id:"3"
},{
Image:"../../static/logo.png",
textButton:"加料+洗机",
id:"4"
},{
Image:"../../static/logo.png",
textButton:"调机",
id:"5"
},{
Image:"../../static/logo.png",
textButton:"生产",
id:"6"
},{
Image:"../../static/logo.png",
textButton:"检验",
id:"7"
}],
}
},
.uni-slsct{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 36px 128px;
.uni-slsct_children{
flex: 24%;
}
}