收藏
回答

flex布局一旦遇上for循环就失效

问题模块 框架类型 操作系统 工具版本
开发者工具 小程序 macOS 1.02.1802080

代码如下:

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部分:(在data里面)

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的知不知道这问题是为什么。

谢谢各位。


补充内容:

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


最后一次编辑于  2018-02-14  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

2 个回答

  • 赵青山
    赵青山
    2018-02-15

    这不是vue,你写错了,你那个wx:for写在skill-item里就可以

    2018-02-15
    赞同
    回复
  • 🇪🇸AleN🐱
    🇪🇸AleN🐱
    2018-02-16

    @赵子龙 感谢你哦,问题解决了~

    2018-02-16
    赞同
    回复