收藏
回答

布局问题,不知道如何解决,求大家帮忙

框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 需求 工具 6.5.3 2.0.0

- 需求的场景描述(希望解决的问题)


上面的数据是一个大循环(对象、时节)输出的,然后再嵌套一个循环(儿童、初中生、高中....)输出的。

在布局上,对象的view 跟 儿童的view是同等级的,采用了flex布局,但是出现了问题,就是第二个红框的内容肯定是在“对象”这个view下面另起一行的,没办法移到第一个红框进去,下面的“时节”内容也这样,求大牛帮看看有什么方案解决我有需求不?

下面是相关代码:

<block wx:for="{{words}}" wx:key="key">
  <view class="recommend-item">
    <view class="item">
     <text class="item-title">{{item.key}}</text>
    </view>
    <block wx:for="{{item.values}}" wx:key="sub-key">
      <view class="sub-item" wx:key="items">
        <text>{{item}}</text>
      </view>
    </block>
  </view>
</block>
.recommend-item{
  display: flex;
  flex-direction: row;
  justify-content:space-start;
  margin-left: 15rpx;
  margin-bottom: 20rpx;
  margin-top: 20rpx;
  margin-right: 15;
  flex-wrap:wrap;
}
.item{
  width: 120rpx;
  font-size: 18px;
  height: 120rpx;
  text-align: center;
  border: 1px solid #f6f6f6;
}
.sub-item{
  font-size: 15px;
  height: 60rpx;
  width: 120rpx;
  text-align: center;
  border: 1px solid #f6f6f6;
}

- 希望提供的能力


回答关注问题邀请回答
收藏

4 个回答

  • 轻兔小程序服务商
    轻兔小程序服务商
    2019-04-30

    给item.values套个框  长100% 给个padding

    2019-04-30
    有用 2
    回复
  • 2019-04-30

    block标签不是小程序的组件,只能接受控制逻辑,所以对象的view和儿童、初中生的view是同级的,flex布局,从flex-start是从容器开头开始布局的,如果要实现你说的效果,需要在儿童、初中生。。。的view外再加一个view,这个view和对象同级,然后设置flex:1,display:flex,flex-wrap:wrap;就可以实现了

    2019-04-30
    有用
    回复
  • 夏落
    夏落
    2019-04-29
    <view class="item" wx:for="{{words}}" wx:key="{{key}}">
      <view class="item-front">
        <text class="item-front-text">{{item.key}}</text>
      </view>
      <view class="item-behind">
        <text class="item-behind-text" wx:for="{{item.values}}" wx:for-item="value" wx:key="{{value}}">{{value}}</text>
      </view>
    </view>
    .item{
      display: flex;
      flex-direction: row;
      margin: 0rpx 15rpx;
    }
     
    .item-front {
      display: flex;
      flex-direction: column;
      width: 120rpx;
    }
     
    .item-behind {
      display: flex;
      flex: 1;
      flex-direction: row;
      flex-wrap: wrap;
    }
     
    .item-front-text {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 60rpx;
      font-size: 18px;
      font-weight: 20px;
      text-align: center;
      border: 1px solid #f6f6f6;
    }
     
    .item-behind-text {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 60rpx;
      width: 120rpx;
      font-size: 15px;
      font-weight: 15px;
      text-align: center;
      border: 1px solid #f6f6f6;
    }


    2019-04-29
    有用
    回复
  • 2019-04-28

    红颜色的框框框是我截图标注,本身不是界面一部分

    2019-04-28
    有用
    回复
登录 后发表内容