微信小程序首页、界面布局、自定义顶部（示例一）

微信小程序首页、界面布局、自定义顶部搜索框（示例一）

具体界面见下图：

如需界面中引用的图片文件和更多功能，请滑动至底部查看下载链接，可下载完整版，下载后直接使用微信开发者工具打开即可，完整版功能更详细呦。当前界面的布局样式代码如下（如存在不足之处，请根据具体需求，自行修改）：
1、js代码：

Page({
    /**
     * 页面的初始数据
     */
    data: {
        viewHeight: 640, // 默认高度
        navIndex: 0,
        tabList: [{
        		id: '1',
                src: '../../images/select.png',
                title: '菜单一'
            },
            {
            	id: '2',
                src: '../../images/sort.png',
                title: '菜单二'
            },
            {
            	id: '3',
                src: '../../images/select.png',
                title: '菜单三'
            },
            {
            	id: '4',
                src: '../../images/sort.png',
                title: '菜单四'
            }
        ],
        navList: [
            [
                [{
                        id: '1',
                        path: 'pages/path1/index', // 具体需要跳转至该界面的路径
                        img: '../../images/msg.png',
                        title: '功能一'
                    },
                    {
                        id: '2',
                        path: 'pages/path2/index',
                        img: '../../images/set.png',
                        title: '功能二'
                    },
                    {
                        id: '3',
                        path: 'pages/path3/index',
                        img: '../../images/msg.png',
                        title: '功能三'
                    },
                    {
                        id: '4',
                        path: 'pages/path4/index',
                        img: '../../images/set.png',
                        title: '功能四'
                    }
                ],
                [{
                        id: '5',
                        path: 'pages/path5/index',
                        img: '../../images/msg.png',
                        title: '功能五'
                    },
                    {
                        id: '6',
                        path: 'pages/path6/index',
                        img: '../../images/set.png',
                        title: '功能六'
                    },
                    {
                        id: '7',
                        path: 'pages/path7/index',
                        img: '../../images/msg.png',
                        title: '功能七'
                    },
                    {
                        id: '8',
                        path: 'pages/path8/index',
                        img: '../../images/set.png',
                        title: '功能八'
                    },
                ]
            ],
            [
                [{
                        id: '9',
                        path: 'pages/path9/index',
                        img: '../../images/set.png',
                        title: '功能A'
                    },
                    {
                        id: '10',
                        path: 'pages/path10/index',
                        img: '../../images/msg.png',
                        title: '功能B'
                    },
                    {
                        id: '11',
                        path: 'pages/path11/index',
                        img: '../../images/set.png',
                        title: '功能C'
                    },
                    {
                        id: '12',
                        path: 'pages/path12/index',
                        img: '../../images/msg.png',
                        title: '功能D'
                    }
                ],
            ]
        ],
        articleList: [{
                content: '本创作分享给需要的用户使用，如存在不足之处，欢迎留言指正。',
                src: '../../images/money.jpeg',
                url: 'http://t.csdn.cn/316d5'
            },
            {
                content: '点赞，收藏加关注，后续将编写更多示例，同大家分享。',
                src: '../../images/money.jpeg',
                url: 'http://t.csdn.cn/316d5'
            },
            {
                content: '点赞，收藏加关注，后续出更完成版示例，同大家分享。',
                src: '../../images/money.jpeg',
                url: 'http://t.csdn.cn/316d5'
            },
        ]
    },
    // 滑动监听
    moduleSelect(e){
        this.setData({
            navIndex:e.detail.current
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
        var that = this;
        wx.getSystemInfo({
            success(res) {
                that.setData({
                    viewHeight:res.windowHeight
                })
            }
        })
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

2、wxml代码

<view class="bg-box">
    <!-- 搜索 -->
    <view class="level search-box">
        <image class="col-1" style="width: 10%;" src="../../images/scan-code.png" mode="widthFix"></image>
        <view class="level col-2">
            <icon class="icon-small" type="search" size="20"></icon>
            <input placeholder="输入关键字" class="input-text" />
        </view>
        <image class="col-1" src="../../images/service.png" mode="widthFix"></image>
        <image class="col-1" src="../../images/message.png" mode="widthFix"></image>
    </view>
    <!-- 二级菜单 -->
    <view class="level tab-box">
        <block wx:for="{{tabList}}" wx:for-index="index" wx:for-item="item" wx:key="item">
            <view class="tab-list">
                <image class="tab-img" src="{{item.src}}" mode="widthFix"></image>
                <view class="tab-text">{{item.title}}</view>
            </view>
        </block>
    </view>
    <!-- 功能菜单 -->
    <view class="swiper-box">
        <swiper hcircular='true' bindchange='moduleSelect' style="height: {{viewHeight*0.29}}px;" current="{{navIndex}}">
            <block wx:for="{{navList}}" wx:key='navRow' wx:for-item="navRow">
                <swiper-item>
                    <block wx:for="{{navRow}}" wx:key='navItem' wx:for-item="navItem">
                        <view class="nav-list">
                            <block wx:for="{{navItem}}" wx:key='item'>
                                <view data-item="{{item}}" class="nav">
                                    <image src="{{item.img}}" mode="widthFix"></image>
                                    <text class="nav-text">{{item.title}}</text>
                                </view>
                            </block>
                        </view>
                    </block>
                </swiper-item>
            </block>
        </swiper>
        <view class="lab">
            <block wx:for="{{navList}}" wx:key="*this">
                <label class="{{navIndex==index?'active-yes':'active-no'}}"></label>
            </block>
        </view>
    </view>
</view>
<view class="tip-box level">
    <view class="tip-title">示例</view>
    <view class="tip-info">记得点赞、收藏加关注哦，以免找不到了哦，谢谢</view>
</view>
<view class="model-box">
    <view class="model-text">更多demo，请关注我，持续更新中！</view>
</view>
<!-- 科普文章 -->
<view class="article-box">
    <view class="level">
        <view class="line"></view>
        <view class="title">科普文章</view>
    </view>
    <block wx:for="{{articleList}}" wx:for-index="index" wx:for-item="item" wx:key="item">
        <view class="article-list">
            <view class="row-left">{{item.content}}</view>
            <view class="row-right">
                <image src="{{item.src}}" class="row-img" mode="widthFix"></image>
            </view>
        </view>
    </block>
</view>

3、wxss代码

page {
    background-color: #f1f1f1;
}

.bg-box {
    background-image: linear-gradient(to bottom, #fd9f50, #f6c79d, #f1f1f1);
}

/* 搜索 */
.search-box {
    padding: 20rpx 0;
}

.col-1 {
    width: 8%;
    text-align: center;
    padding: 0 20rpx;
}

.col-2 {
    width: 70%;
    padding: 15rpx 10rpx;
    border-radius: 10rpx;
    background-color: white;
}

.input-text {
    font-size: 30rpx;
    padding-left: 10rpx;
}

/* 二级菜单 */
.tab-box {
    margin: 5% 0;
}

.tab-list {
    flex: 1;
    text-align: center;
    color: white;
}

.tab-img {
    width: 50%;
}

.tab-text {
    font-size: 30rpx;
    margin: 5rpx 0;
}

/* 功能菜单 */
.swiper-box {
    background-color: white;
    margin: 0 20rpx;
    border-radius: 5rpx;
    padding-top: 20rpx;
}

.nav-list {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    padding-top: 25rpx;
}

.nav image {
    width: 45%;
}

.nav-text {
    padding-top: 10rpx;
    font-size: 26rpx;
    color: gray;
}

.lab {
    display: flex;
    justify-content: center;
    padding-bottom: 20rpx;
}

.lab label {
    margin: 0 6rpx;
    height: 12rpx;
}

.active-yes {
    background-color: #fd9f50;
    width: 25rpx;
    border-radius: 45rpx;
}

.active-no {
    width: 12rpx;
    border-radius: 50rpx;
    background-color: gray;
}

.tip-box {
    background-color: white;
    margin: 20rpx;
    border-radius: 5rpx;
    font-size: 30rpx;
    padding: 20rpx;
}

.tip-title {
    padding: 0 15rpx;
    width: 12%;
    border-right: 1rpx solid #f1f1f1;
}

.tip-info {
    padding: 0 15rpx;
    color: gray;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.model-box {
    margin: 20rpx;
    border-top-left-radius: 50rpx;
    border-bottom-right-radius: 50rpx;
    background-color: #fcdabd;
    padding: 30rpx;
}

.model-text {
    font-size: 30rpx;
    color: rgb(53, 53, 53);
}

/* 科普文章 */
.article-box {
    margin: 20rpx;
}

.line {
    width: 10rpx;
    height: 34rpx;
    border-radius: 50rpx;
    background-color: orange;
}

.title {
    margin-left: 15rpx;
    font-size: 30rpx;
    font-weight: bold;
}

.article-list {
    margin: 20rpx 0;
    padding: 20rpx;
    background-color: white;
    font-size: 30rpx;
    border-radius: 5rpx;
    display: flex;
}

.row-left {
    width: 60%;
    line-height: 45rpx;
    color: rgb(54, 54, 54);
}

.row-right {
    width: 40%;
    text-align: center;
}

.row-img {
    width: 70%;
}

4、json代码

{
    "usingComponents": {},
    "navigationBarTitleText": "首页",
    "navigationBarBackgroundColor": "#fd9f50"
}

示例一完整版下载地址（包含引用的图片文件、按钮监听和自定义顶部状态栏功能）：
完整版示例一