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

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

效果图
微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：https://edu.csdn.net/topic/huangjuhua
微信小程序weui在线入门教程

在这里插入图片描述

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>