解决方案:

              <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%;
                    }
	        }

相关文章:

  • 2021-12-16
  • 2022-12-23
  • 2022-01-16
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-12-02
猜你喜欢
  • 2022-12-23
  • 2021-11-24
  • 2022-12-23
  • 2022-12-23
  • 2021-06-06
  • 2021-07-20
  • 2021-11-17
相关资源
相似解决方案