一、前言

上一节实现了自定义头部导航栏功能，可以兼容适配各种机型，想要学习的可以看上一篇文章。 # 商城小程序首页（一）：仿某品会的自定义头部导航栏（完美）

咱们继续实现商城首页功能，接着参考唯品会的搜索和活动Banner轮播功能，实现效果如下：

二、功能分析

• 搜索框：左侧是放大镜icon、右侧是相机icon，点击输入框可以跳转到 搜索历史页面。

• 活动Banner：加载轮播数据，从左到右，每3秒滚动一次。

• 平台动态：在Banner上添加了平台最新用户下单信息，从下往上滚动。

二、功能开发

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

1、代码目录结构

├─pages

│   └─home

│              home.js

│              home.json

│              home.wxml

│              home.wxss

page/home/home.wxml 部分代码

<view class="head" style="margin-top:{{navHeight}}px">
    <view class="text_title_sub">{{store_name_sub}}</view>
    <view class="head_input" bindtap="goSearch">
        <image src="/images/search_icon.png" class="search_icon"></image>
        <input type="text" placeholder="iphone 13 火热发售中" placeholder-class="place_holder"  value="{{search}}"></input>
        <image src="/images/camera_icon.png" class="camera_icon"></image>
    </view>
</view>
<view class="head-bg mb20"></view>

<!--商品活动Banner-->
<view class="banner-container" style="margin-top: {{carouselMarginTop}}rpx">
    <swiper class="swiper1" bindtap="tapBanner" indicator-dots="{{indicatorDots}}" autoplay circular>
        <swiper-item wx:for="{{bannerList}}" wx:key="id">
            <image mode="widthFix" bindtap="tapBanner" data-linkUrl="{{item.linkUrl}}" src="{{item.imgUrl}}" />
        </swiper-item>
    </swiper>
    <view wx:if="{{dynamicList && show_buy_dynamic == '1' }}" class="goodsDynamic">
        <swiper class="swiper2" autoplay circular vertical>
            <navigator wx:for="{{dynamicList}}" wx:key="index">
                <swiper-item>
                    <view class="goodsDynamic-item">
                        <image mode="aspectFill" src="{{item.avatarUrl}}"></image>
                        <text>{{item.nick}} 购买了 {{item.goodsName}}</text>
                    </view>
                </swiper-item>
            </navigator>
        </swiper>
    </view>
</view>

page/home/home.wcss 部分代码

    position: relative;
    flex: 1;
    margin: 12rpx 10rpx;
}

.search_icon {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -15rpx;
    width: 30rpx;
    height: 31rpx;
    padding-left: 26rpx;
}

.camera_icon {
    position: absolute;
    top: 50%;
    right: 23rpx;
    margin-top: -15rpx;
    width: 36rpx;
    height: 33rpx;
    /* padding-right: 23rpx; */
}

.head_input input {
    height: 68rpx !important;
    padding-left: 75rpx;
    font-size: 28rpx;
    background: #fff;
    border-radius: 32rpx !important;
}

.place_holder {
    font-size: 30rpx;
    color: #999999;
}

.sha_icon {
    margin-left: 18rpx;
    font-size: 28rpx;
    color: #333333;
}

.head {
    width: 750rpx;
    height: 100rpx;
    position: fixed;
    top: 0;
    background: var(--bg);
    z-index: 99;
}

/**头部背景**/
.head-bg {
    width: 100%;
    height: 231rpx;
    overflow: hidden;
    position: absolute;
    z-index: -10;
    margin-top: -50rpx;
    background: var(--bg);
    background-attachment: fixed;
    background-position: center bottom;
}

.head-bg::after {
    content: '';
    width: 140%;
    height: 231rpx;
    position: absolute;
    left: -20%;
    top: 0;
    border-radius: 0 0 50% 50%;
    background: var(--bg);
}

.head-bg .mb20 {
    margin-bottom: 20rpx;
}

/**Banner轮播 **/
.banner-container {
    position: relative;
    z-index: 1;
    width: 97%;
    margin: 0 auto;
}

.banner-container .swiper1 swiper-item image {
    width: 100%;
    height: 100%;
    border-radius: 10rpx;
}

.goodsDynamic {
    position: absolute;
    bottom: 46rpx;
    left: 24rpx;
    width: 568rpx;
    color: #fff;
    font-size: 24rpx;
}

.goodsDynamic .swiper2 {
    width: 100%;
    height: 64rpx;
    width: 100%;
}

.goodsDynamic-item {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 32rpx;
    padding: 8rpx 16rpx;
}

.goodsDynamic-item image {
    width: 32rpx;
    height: 32rpx;
    border-radius: 50%;
    flex-shrink: 0;
}

.goodsDynamic-item text {
    margin-left: 8rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

项目地址

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

github.com/yundianzixu…