需求

有個(gè)需求，在微信小程序中需要實(shí)現(xiàn)如下布局

布局

兩個(gè)矩形橫向布局，然后再跟著一個(gè)大矩形

數(shù)據(jù)格式

[
    {
        "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": "做個(gè)干物女",
        "topic_img": {
            "url": "http://z.cn/images/3@theme.png"
        },
        "head_img": {
            "url": "http://z.cn/images/3@theme.png"
        }
    }
]

分析

服務(wù)器傳回來的數(shù)據(jù)是一個(gè)數(shù)組，但是 UI 上的布局是不規(guī)則的。所以在布局的時(shí)候需要進(jìn)行區(qū)分。

對(duì)于第一個(gè)第二個(gè)矩形，采用一套 css 樣式，而對(duì)于大矩形，采用另外一套 css 樣式。
那么，就需要 if-else 語句來判斷，從而套上不同的 css 樣式。在微信小程序中，可以使用 wx:if 和 wx:else 進(jìn)行判斷。

代碼

首先是 wxml 的代碼，使用 wx:if 和 wx:else 進(jìn)行判斷。對(duì)于大矩形用 theme-item big 樣式，對(duì)于小矩形用 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;
}

這段代碼是給第一個(gè)矩形添加一個(gè) border-right

對(duì)于普通的矩形，寬度設(shè)為 50%

.theme-item {    
    width: 50%;
}

對(duì)于大矩形，寬度設(shè)為 100%

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