WXOPEN Club

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

发布于 6 年前作者 yong8110675 次浏览最后编辑 6 年前来自 ask
  • 需求的场景描述（希望解决的问题）

上面的数据是一个大循环（对象、时节）输出的，然后再嵌套一个循环（儿童、初中生、高中…）输出的。

在布局上，对象的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 回复
jiefang
jiefang1 楼6 年前
<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;
}
qiangkong
qiangkong2 楼6 年前

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

fengjing
fengjing3 楼6 年前

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

weicheng
weicheng4 楼4 年前

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