小程序WeUI组件库：九宫格

代码

    <view class="page">

        <view class="page__hd">

        <view class="page__title">商务邮件模板</view>

        <view class="page__desc"  bind:tap="onTapEmail">询盘信</view>

        </view>

<view class="page__bd">

        <view class="weui-grids">



                        <navigator url="" class="weui-grid" hover-class="weui-grid_active">

                        <image class="weui-grid__icon" src="/images/menu01.png" />

                        <view class="weui-grid__label">Grid</view>

                        </navigator>

                        <navigator url="" class="weui-grid" hover-class="weui-grid_active">

                        <image class="weui-grid__icon" src="/images/menu02.png" />

                        <view class="weui-grid__label">Grid</view>

                        </navigator>

                        <navigator url="" class="weui-grid" hover-class="weui-grid_active">

                        <image class="weui-grid__icon" src="/images/menu03.png" />

                        <view class="weui-grid__label">Grid</view>

                        </navigator>

                        <navigator url="" class="weui-grid" hover-class="weui-grid_active">

                        <image class="weui-grid__icon" src="/images/menu04.png" />

                        <view class="weui-grid__label">Grid</view>

                        </navigator>

                        <navigator url="" class="weui-grid" hover-class="weui-grid_active">

                        <image class="weui-grid__icon" src="/images/menu05.png" />

                        <view class="weui-grid__label">Grid</view>

                        </navigator>

                        <navigator url="" class="weui-grid" hover-class="weui-grid_active">

                        <image class="weui-grid__icon" src="/images/menu06.png" />

                        <view class="weui-grid__label">Grid</view>

                        </navigator>



        </view>

</view>

效果图