2018-11-12 小程序wx:for横向列表布局

问题

我们知道，wx:for可以实现列表布局，但是默认实现的是纵向列表布局，如歌实现横向列表布局呢？

解决

1. 直接设置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

2. 设置一个父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