问题
我们知道，wx:for可以实现列表布局，但是默认实现的是纵向列表布局，如歌实现横向列表布局呢？
解决
- 直接设置
display: inline-block;
<view class='rowItem' wx:for="{{listData}}"></view>
.rowItem {
height: 20rpx;
width: 50rpx;
background-color: red;
margin-right: 5px;
display: inline-block;
}
效果如下：
image.png
- 设置一个父view，
display:flex，利用flex布局实现横向列表
<view class='rowContainer'>
<view wx:for="{{array}}" class='rowItem'></view>
</view>
.rowContainer {
display: flex;
}
.rowItem {
display: flex;
width: 50px;
height: 20px;
background-color: red;
margin-right: 10px;
}
效果如下：
image.png
网友评论