小程序中实现一个比较奇特布局

需求

有个需求，在微信小程序中需要实现如下布局

布局

两个矩形横向布局，然后再跟着一个大矩形

数据格式

[
    {
        "id": 1,
        "name": "专题栏位一",
        "description": "美味水果世界",
        "topic_img": {
            "url": "http://z.cn/images/1@theme.png"
        },
        "head_img": {
            "url": "http://z.cn/images/1@theme-head.png"
        }
    },
    {
        "id": 2,
        "name": "专题栏位二",
        "description": "新品推荐",
        "topic_img": {
            "url": "http://z.cn/images/2@theme.png"
        },
        "head_img": {
            "url": "http://z.cn/images/2@theme-head.png"
        }
    },
    {
        "id": 3,
        "name": "专题栏位三",
        "description": "做个干物女",
        "topic_img": {
            "url": "http://z.cn/images/3@theme.png"
        },
        "head_img": {
            "url": "http://z.cn/images/3@theme.png"
        }
    }
]

分析

服务器传回来的数据是一个数组，但是 UI 上的布局是不规则的。所以在布局的时候需要进行区分。

对于第一个第二个矩形，采用一套 css 样式，而对于大矩形，采用另外一套 css 样式。
那么，就需要 if-else 语句来判断，从而套上不同的 css 样式。在微信小程序中，可以使用 wx:if 和 wx:else 进行判断。

代码

首先是 wxml 的代码，使用 wx:if 和 wx:else 进行判断。对于大矩形用 theme-item big 样式，对于小矩形用 theme-item 样式

<view class="theme-box">
    <block wx:for="{{themeArr}}" wx:key="item">
        <view wx:if="{{index == 2}}" class="theme-item big">
            <image src="{{item.topic_img.url}}" />
        </view>
        <view wx:else class="theme-item">
            <image src="{{item.topic_img.url}}" />
        </view>
    </block>
</view>

然后是 wxss 代码

.theme-box {
    display: flex;
    flex-wrap: wrap;
}

.theme-item {
    display: flex;
    height: 375rpx;
    width: 50%;
    border-bottom: 4rpx solid #fff;
    box-sizing: border-box;
}

.theme-item:first-child {
    border-right: 4rpx solid #fff;
}

.theme-item.big {
    width: 100%;
}

.theme-item image {
    height: 100%;
    width: 100%;
}

注意

.theme-item:first-child {
    border-right: 4rpx solid #fff;
}

这段代码是给第一个矩形添加一个 border-right

对于普通的矩形，宽度设为 50%

.theme-item {    
    width: 50%;
}

对于大矩形，宽度设为 100%

.theme-item.big {
    width: 100%;
}