布局问题,不知道如何解决,求大家帮忙
- 需求的场景描述(希望解决的问题)
上面的数据是一个大循环(对象、时节)输出的,然后再嵌套一个循环(儿童、初中生、高中…)输出的。
在布局上,对象的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 : 15 rpx; margin-bottom : 20 rpx; margin-top : 20 rpx; margin-right : 15 ; flex-wrap:wrap; } .item{ width : 120 rpx; font-size : 18px ; height : 120 rpx; text-align : center ; border : 1px solid #f6f6f6 ; } .sub-item{ font-size : 15px ; height : 60 rpx; width : 120 rpx; 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 : 0 rpx 15 rpx; } .item-front { display : flex; flex- direction : column; width : 120 rpx; } .item- behind { display : flex; flex: 1 ; flex- direction : row; flex-wrap: wrap; } .item-front-text { display : flex; justify- content : center ; align-items: center ; height : 60 rpx; 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 : 60 rpx; width : 120 rpx; font-size : 15px ; font-weight : 15px ; text-align : center ; border : 1px solid #f6f6f6 ; } |