- 需求的场景描述（希望解决的问题）
上面的数据是一个大循环（对象、时节）输出的，然后再嵌套一个循环（儿童、初中生、高中....）输出的。
在布局上，对象的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;} |
- 希望提供的能力
给item.values套个框 长100% 给个padding
block标签不是小程序的组件，只能接受控制逻辑，所以对象的view和儿童、初中生的view是同级的，flex布局，从flex-start是从容器开头开始布局的，如果要实现你说的效果，需要在儿童、初中生。。。的view外再加一个view，这个view和对象同级，然后设置flex：1，display：flex，flex-wrap：wrap；就可以实现了
<viewclass="item"wx:for="{{words}}"wx:key="{{key}}"><viewclass="item-front"><textclass="item-front-text">{{item.key}}</text></view><viewclass="item-behind"><textclass="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:0rpx15rpx;}.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:1pxsolid#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:1pxsolid#f6f6f6;}红颜色的框框框是我截图标注，本身不是界面一部分