0

代码如下:

wxml部分:

<view class='skill' hidden='{{currentNavtab == "3" ? "" : true}}'>
    <view class='box' wx:for='{{skill}}'>
      <view class='skill-item'>
        <image class='icon' src='{{item.icon}}'></image>
        <view class='name'>{{item.name}}</view>
      </view>
    </view>
  </view>

wxss部分:

.skill .box {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: space-around;
}
.skill .skill-item {
  box-sizing: border-box;
  flex: 0 0 33.3333333333333%;
  font-size: 24rpx;
  color: #535353;
  background-color: white;
  padding: 40rpx;
  text-align: center;
}
.skill .icon {
  height: 50rpx;
  width: 50rpx;
  margin: 15rpx;
}
.skill .name {
  margin: 0 auto;
}

js部分:

skill: [
      {
        icon: '../../img/skill/research.png',
        name: '文献调查'
      },
      {
        icon: '../../img/skill/research.png',
        name: '文献调查'
      },
      {
        icon: '../../img/skill/research.png',
        name: '文献调查'
      },
      {
        icon: '../../img/skill/research.png',
        name: '文献调查'
      },
      {
        icon: '../../img/skill/research.png',
        name: '文献调查'
      },
      {
        icon: '../../img/skill/research.png',
        name: '文献调查'
      },
    ]

目前结果呈现:
图片描述

完全不明白为什么,明明flex-direction已经设置了是row了,还是像column一样竖着拍下来了。

没有进一步学习过vue,所以不知道各位懂vue的知不知道这问题是为什么。

谢谢各位。


补充内容:

我的目的是希望能够布局三个方块一行排列下去的效果。

2个回答

1

第一,你循环放错位置了!
只改布局,不改样式

    <view class='skill' >
    <view class='box'>
      <view class='skill-item'  wx:for='{{skill}}'>
        <image class='icon' src='{{item.icon}}'></image>
        <view class='name'>{{item.name}}</view>
      </view>
    </view>
  </view>

第二,循环的.box设置了宽度100%

只改样式,不改布局


.skill {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: space-around;
}
.skill  .box {
  box-sizing: border-box;
  flex: 0 0 33.3333333333333%;
  font-size: 24rpx;
  color: #535353;
  background-color: white;
  padding: 40rpx;
  text-align: center;
}
.skill .icon {
  height: 50rpx;
  width: 50rpx;
  margin: 15rpx;
}
.skill .name {
  margin: 0 auto;
}
0

skill这个view是不是宽度没展开?

撰写答案

Planets