我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

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

苏南大叔:weui框架组件小白入门指南:grid九宫格如何使用? - weui-grid-hero
weui框架组件小白入门指南:grid九宫格如何使用?(图3-1)

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

本文测试环境mac,weui@1.1.3chrome@ 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的相关文章,请点击下面的链接查看。

助理微信

微信打赏码

微信公众号

微信小程序

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

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