微信小程序weui在线入门教程-WeUi基础组件-grid九宫格

版权声明：摇亿.黄菊华 https://blog.csdn.net/u013818205/article/details/86413912

效果图

wxml代码

<view class="page">

  <view class="page__hd">

    <view class="page__title">Grid</view>

    <view class="page__desc">九宫格</view>

  </view>

  <view class="page__bd">

    <view class="weui-grids">

      <block wx:for="{{grids}}" wx:key="*this">

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

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

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

        </navigator>

      </block>

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

</view>

欢迎大家学习我的视频教程：微信小程序-WeUI界面布局设计入门到精通