小程序首页设计实现（uniapp）

<view class="bar-box" style="height: {{navBarHeight}}px;">

    <view wx:if="{{show}}" class="level" style="margin-top: {{barHeight}}px;">

        <image class="bar-1" style="width: 10%;" src="../../images/scan-code.png" mode="widthFix" bindtap="scanClick"></image>

        <view class="level bar-2">

            <icon class="icon-small" type="search" size="20"></icon>

            <input placeholder="输入关键字" class="input-text" disabled="true" bindtap="searchClick" />

        </view>

    </view>

    <view class="bar-title" style="margin-top: {{barHeight}}px;" wx:else>首页</view>

</view>

<view class="bg-box" style="padding-top: {{navBarHeight}}px;">

    <!-- 搜索 -->

    <view class="level search-box">

        <image class="col-1" style="width: 10%;" src="../../images/scan-code.png" mode="widthFix" bindtap="scanClick"></image>

        <view class="level col-2">

            <icon class="icon-small" type="search" size="20"></icon>

            <input placeholder="输入关键字" class="input-text" disabled="true" bindtap="searchClick" />

        </view>

        <image class="col-1" src="../../images/service.png" mode="widthFix" bindtap="serviceClick"></image>

        <image class="col-1" src="../../images/message.png" mode="widthFix" bindtap="messageClick"></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" bindtap="tabClick" data-id="{{item.id}}">

                <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.25}}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 bindtap="navClick" 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" bindtap="tipClick">

    <view class="tip-title">通知</view>

    <view class="tip-info"></view>

</view>

<!-- 模块 -->

<view class="model-box" bindtap="modelClick">

    <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" bindtap="articleClick" data-url="{{item.url}}">

            <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>