苏南大叔继续进行weui系列小白科普文章，本文中讲述的是：grid组件，也就是平时说的九宫格效果的使用方式。再次强调：本文是小白扫盲贴，高手请飘过。本文又是一篇水文，没深度没内涵没思考，仅仅表述现有事实效果。

苏南大叔：weui框架组件小白入门指南：grid九宫格如何使用？ - weui-grid-hero
weui框架组件小白入门指南：grid九宫格如何使用？（图3-1）

好吧，苏南大叔在这里稍稍发布一下思考内容：九宫格就是个俗称，其实，不是九个也没有啥问题的，都是一样可以显示的。

本文测试环境mac,weui@1.1.3，chrome@ 73.0.3683.103。

基本代码

基础代码：

<div class="weui-grids">
    <a href="javascript:;" class="weui-grid">
        <div class="weui-grid__icon">
            <img src="./images/icon_tabbar.png" alt="">
        </div>
        <p class="weui-grid__label">Grid</p>
    </a>
</div>

苏南大叔：weui框架组件小白入门指南：grid九宫格如何使用？ - weui-grid-code
weui框架组件小白入门指南：grid九宫格如何使用？（图3-2）

关键词就下面这么几个，也没有啥好展开说明的：

  • weui-grids
  • weui-grid
  • weui-grid__icon
  • weui-grid__label

效果截图：

苏南大叔：weui框架组件小白入门指南：grid九宫格如何使用？ - weui-grid-ui
weui框架组件小白入门指南：grid九宫格如何使用？（图3-3）

参考文档

总结

grid中的图片变成大一些的图片之后，就是个非常好的九宫格图片展示的效果。多循环一些weui-grid出来，效果就很好了。

苏南大叔提示您：更多weui的相关文章，请点击下面的链接查看。

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可，规模化镜像抄袭本站内容的行为，将会根据有关法律法规进行维权。
《程序如此灵动~》下所有原创文章，如被用于商业用途，请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件，请点此获取

 【绝密】秘籍文章入口，仅传授于有缘之人   weui

本站的忠实读者小伙伴，正在阅读下面这些文章：