一、前言

上一节实现了商城首页的搜索、活动Banner轮播和平台动态消息功能，可以查看往期内容。

 商城小程序首页（一）：仿某品会的自定义头部导航栏（完美）

 商城小程序首页（二）：实现商城首页的搜索和活动Banner轮播功能

咱们继续实现商城首页功能，本章实现商城首页里面的商品分类和特卖活动，实现效果如下：

二、功能分析

从上面原始效果图可以看到一共有两个区域，商品的分类导航和商品的品牌导航。

• 商品分类导航：每一行有5个分类进行了平铺，每个包含2个元素（分类icon 和 分类名称）。

• 商品特卖活动：每行有4个类型进行了平铺，每个类型包含2个元素（导航icon 和 名称），组成一张卡片，每隔3秒钟翻转一次。

• 平台消息：实时滚动平台最新消息。

二、功能开发

废话不多说，直接撸代码......

1、代码目录结构

├─pages

│   └─home

│              home.js

│              home.json

│              home.wxml

│              home.wxss

page/home/home.wxml 部分代码

<view class="category-container">
    <view class="category-box">
        <view class="category-list" wx:for="{{categorieList}}" wx:key="id">
            <view class="category-column" bindtap="tabClick" data-id="{{item.id}}">
                <image mode="aspectFill" class="category-imgbox" src="{{item.icon}}"></image>
                <view class="category-title">{{item.name}}</view>
            </view>
        </view>
        <view class="category-list" wx:for="{{cmsCategories}}" wx:key="id">
            <view class="category-column" bindtap="tabClickCms" data-idx="{{ index }}">
                <image mode="aspectFill" class="category-imgbox" src="{{item.icon}}"></image>
                <view class="category-title">{{item.name}}</view>
            </view>
        </view>
    </view>
</view>
<!--平台消息-->
<view class="notice-box" wx:if="{{noticeList}}">
    <swiper class="notice_swiper" vertical autoplay circular interval="8000">
        <swiper-item wx:for="{{noticeList}}" wx:key="id">
            <image slot="left-icon" class="notice-icon" src="../../images/home/notice.png"></image>
            <text>{{ item.title }}</text>
        </swiper-item>
    </swiper>
</view>
<view class="special-container">
    <view class="special-title">
        <text class="name">新品特卖</text>
        <view class="line_flag"></view>
    </view>
    <block wx:for-items="{{specialList}}" wx:key="id">
        <navigator url="/pages/brand/brand?activityId={{item.id}}">
            <image class="head-img" src="{{item.imgUrl}}" mode="widthFix"></image>
        </navigator>
        <text class="brand-name">{{item.name}}</text>
        <view class='pms'>
            <image src="../../images/home/special.png" mode="widthFix"></image>
            {{item.remark}}
        </view>
    </block>
</view>

page/home/home.wxss 部分代码

.category-container {
    width: 97%;
    margin: 0 auto;
    position: relative;
    background-color: fff;
}

.category-box {
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    border-radius: 10px;
    padding: 20rpx 0;
    position: inherit;
}

.category-list {
    width: 140rpx;
    text-align: center;
    display: inline-block;
    overflow: hidden;
}

.category-column {
    width: 100%;
    margin-top: 20rpx;
    overflow: hidden;
}

.category-imgbox {
    width: 100rpx;
    height: 100rpx;
}

.category-title {
    font-size: 24rpx;
    text-align: center;
}

/* 平台消息 */
.notice-box {
    width: 97%;
    margin: 0 auto;
    position: relative;
    background-color: #fff;
    margin-top: 10rpx;
    /* border-bottom: 1rpx solid #efeff4; */
    /* border-radius: 10px; */
}

.notice_swiper {
    height: 75rpx;
    line-height: 75rpx;
    padding-left: 16rpx;
    font-size: 30rpx;
    overflow: hidden;
    color: #e64340;
}
.notice-icon {
    width: 130rpx;
    height: 32rpx;
    margin-right: 10px;
    background-color: #fff;
    position: relative;
    z-index: 2;
   
}


/* 新品特卖 */
.special-container {
    position: relative;
    width: 97%;
    margin: 0 auto;
    margin-top: -10rpx;
    background-color: #fff;
    border-radius: 10px;
}

.special-title {
    display: flex;
    flex-direction: column;
    margin-bottom: 0rpx;
}

.special-title .name {
    font-size: 40rpx;
    text-align: center;
    margin: 5rpx auto;
}

.special-title .line_flag {
    width: 80rpx;
    height: 2rpx;
    display: inline-block;
    margin: 5rpx auto;
    background-color: #bbbbbb;
    text-align: center;
}

.head-img {
    width: 100%;
}

.brand-name {
    font-weight: 600;
    font-size: 32rpx;
}

.pms {
    font-size: 28rpx;
    margin-bottom: 20rpx;
    display: flex;
    justify-content: left;
    flex-direction: row;
    color: #5771a8;
}

.pms image {
    width: 35rpx;
    height: 35rpx;
    margin-right: 10rpx;
    /* position: absolute; */
}

项目地址

开源不易，大家给项目点个Star，也是对项目的认可与支持！

github.com/yundianzixu…