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

客官°小女子只卖身不卖艺 2024-02-19 15:48 5阅读 0赞

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]

> 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界面布局设计入门到精通][-WeUI]  
![微信小程序-WeUI界面布局设计入门到精通][-WeUI 1]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[weui]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/e8ccb5ad0fd74cdfb36d6d5b17bd9590.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/2443b6f6451b439e88555792685af45a.png
[-WeUI]: https://ke.qq.com/course/348627?tuin=2b10d56
[-WeUI 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/55e7369730a74a24b80f7a8d40353add.png

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序weui在线入门教程-WeUi导航相关-navbar

效果图微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][http

雨点打透心脏的1/2处/ 2024年02月19日 15:53/ 0 赞/ 6 阅读

相关微信小程序weui在线入门教程-WeUi操作反馈-msg提示页

成功提示页面微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][h

谁践踏了优雅/ 2024年02月19日 15:50/ 0 赞/ 15 阅读

相关微信小程序weui在线入门教程-WeUi表单组件-uploader上传

效果图微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][http

我不是女神ヾ/ 2024年02月19日 15:50/ 0 赞/ 4 阅读

相关微信小程序weui在线入门教程-WeUi表单组件-list列表

效果图微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][http

逃离我推掉我的手/ 2024年02月19日 15:49/ 0 赞/ 4 阅读

相关微信小程序weui在线入门教程-WeUi基础组件-footer页脚

效果图微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][http

冷不防/ 2024年02月19日 15:49/ 0 赞/ 4 阅读

相关微信小程序weui在线入门教程-WeUi基础组件-preview表单预览

效果图微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][http

女爷i/ 2024年02月19日 15:49/ 0 赞/ 3 阅读

相关微信小程序weui在线入门教程-WeUi基础组件-icon图标

效果图微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][http

Bertha 。/ 2024年02月19日 15:49/ 0 赞/ 7 阅读

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

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

客官°小女子只卖身不卖艺/ 2024年02月19日 15:48/ 0 赞/ 6 阅读

相关微信小程序引入weui

[https://www.jianshu.com/p/be2e64e99875][https_www.jianshu.com_p_be2e64e99875] 1.首先得确认

偏执的太偏执、/ 2022年11月19日 04:19/ 0 赞/ 205 阅读

相关微信小程序安装weui

1. 在项目根目录下执行： npm init 1. 然后下包 npm install --save weui-miniprogram 然后报了这么一

悠悠/ 2022年11月05日 08:51/ 0 赞/ 160 阅读