布局问题,不知道如何解决,求大家帮忙
发布于 5 年前 作者 yong81 10457 次浏览 来自 问答
  • 需求的场景描述(希望解决的问题)

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

在布局上,对象的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 回复
<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;
}

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

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

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

回到顶部