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

苏南大叔在本文中,要讲述一些weui里面的panel组件。这个组件名叫panel,不过苏南大叔觉得它叫做list似乎更加合适些。因为在官方的panel例子里面,都是文章列表的范例。在日常的编程中,这个就叫做list文章列表页面。不过,既然大家都决定叫他panel,那就是叫做面板吧。

苏南大叔:weui框架组件小白入门指南:panel面板如何使用? - weui-panel-hero
weui框架组件小白入门指南:panel面板如何使用?(图11-1)

本文测试环境:mac/weui@1.1.3。本文的主要内容里,似乎并不需要weui.js的参与。

基本结构

weui-panel的基本结构包含三部分:

  • weui-panel__hdhd=>head
  • weui-panel__bdbd=>body
  • weui-panel__ftft=>foot

当然,对应的区块里面,又再次进行变化组合。对于本文来说,重点关注的区块就是weui-panel__bd。因为主要的变化就在这里。本文中的例子都来自weui官方,苏南大叔就是个转述分析的作用。

苏南大叔:weui框架组件小白入门指南:panel面板如何使用? - weui-panel-基本结构
weui框架组件小白入门指南:panel面板如何使用?(图11-2)

样式1:图文组合列表

基本代码:

<div class="weui-panel weui-panel_access">
    <div class="weui-panel__hd">图文组合列表</div>
    <div class="weui-panel__bd">
        <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
            <div class="weui-media-box__hd">
                <img class="weui-media-box__thumb" src="icon.png" alt="">
            </div>
            <div class="weui-media-box__bd">
                <h4 class="weui-media-box__title">标题</h4>
                <p class="weui-media-box__desc">内容文字</p>
            </div>
        </a>
    </div>
    <div class="weui-panel__ft">
        <a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link">
            <div class="weui-cell__bd">查看更多</div>
            <span class="weui-cell__ft"></span>
        </a>    
    </div>
</div>

苏南大叔:weui框架组件小白入门指南:panel面板如何使用? - weui-panel-图文组合
weui框架组件小白入门指南:panel面板如何使用?(图11-3)

效果图:

苏南大叔:weui框架组件小白入门指南:panel面板如何使用? - weui-panel-图文组合2
weui框架组件小白入门指南:panel面板如何使用?(图11-4)

样式2:文字组合列表

这个文字组合列表,实际上就是吧图文组合列表中的图片给去掉而已,不过从代码层面上看的话,就顺带去掉了很多结构了。

基本代码:

<div class="weui-panel weui-panel_access">
    <div class="weui-panel__hd">文字组合列表</div>
    <div class="weui-panel__bd">
        <div class="weui-media-box weui-media-box_text">
            <h4 class="weui-media-box__title">标题</h4>
            <p class="weui-media-box__desc">内容文字</p>
        </div>
    </div>
    <div class="weui-panel__ft">
        <a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link">
            <div class="weui-cell__bd">查看更多</div>
            <span class="weui-cell__ft"></span>
        </a>    
    </div>
</div>

苏南大叔:weui框架组件小白入门指南:panel面板如何使用? - weui-panel-文字组合
weui框架组件小白入门指南:panel面板如何使用?(图11-5)

效果图:

苏南大叔:weui框架组件小白入门指南:panel面板如何使用? - weui-panel-文字组合2
weui框架组件小白入门指南:panel面板如何使用?(图11-6)

和图文列表对比主体部分的话,精简的代码也是很多的。下面进行个更明显的代码对比:

<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
    <div class="weui-media-box__hd">
        <img class="weui-media-box__thumb" src="icon.png" alt="">
    </div>
    <div class="weui-media-box__bd">
        <h4 class="weui-media-box__title">标题一</h4>
        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。</p>
    </div>
</a>
<div class="weui-media-box weui-media-box_text">
    <h4 class="weui-media-box__title">标题</h4>
    <p class="weui-media-box__desc">内容文字</p>
</div>

样式3:小图文组合列表(重点)

图文组合列表和小图文组合列表,区别就是:

  • 图文列表中的图较大一些,有标题和描述文字的位置。
  • 小图文列表中的图小一些,只有标题的位置。

基本代码:

<div class="weui-panel">
    <div class="weui-panel__hd">小图文组合列表</div>
    <div class="weui-panel__bd">
        <div class="weui-media-box weui-media-box_small-appmsg">
            <div class="weui-cells">
                <a class="weui-cell weui-cell_access" href="javascript:;">
                    <div class="weui-cell__hd"><img src="" alt="" style="width:20px;margin-right:5px;display:block"></div>
                    <div class="weui-cell__bd weui-cell_primary">
                        <p>文字标题</p>
                    </div>
                    <span class="weui-cell__ft"></span>
                </a>
            </div>
        </div>
    </div>
</div>

苏南大叔:weui框架组件小白入门指南:panel面板如何使用? - weui-panel-小图文组合
weui框架组件小白入门指南:panel面板如何使用?(图11-7)

这种小图文列表其实是个重点,在各种app里面,因为这个的效果组合起来就是最常见的关于页的效果,很多的选项组合列表。大家更换一下小图片的地址即可。

苏南大叔:weui框架组件小白入门指南:panel面板如何使用? - weui-panel-小图文组合2
weui框架组件小白入门指南:panel面板如何使用?(图11-8)

也就是说,使用“小图文列表”样式,多次叠加相关结构,然后换文字换图片,就可以出现下面的类似效果:

苏南大叔:weui框架组件小白入门指南:panel面板如何使用? - weui-wechat-about-ui
weui框架组件小白入门指南:panel面板如何使用?(图11-9)

样式4:文字列表附来源

这个文字列表附来源的样式,和图文组合列表这个样式,两者使用场景比较类似了。对于最常见的文章列表的清空,就可以使用这两种样式中的其中一种了。主要的区别也就是带不带图片。

基本结构:

<div class="weui-panel">
    <div class="weui-panel__hd">文字列表附来源</div>
    <div class="weui-panel__bd">
        <div class="weui-media-box weui-media-box_text">
            <h4 class="weui-media-box__title">标题</h4>
            <p class="weui-media-box__desc">描述文字</p>
            <ul class="weui-media-box__info">
                <li class="weui-media-box__info__meta">文字来源</li>
                <li class="weui-media-box__info__meta">时间</li>
                <li class="weui-media-box__info__meta weui-media-box__info__meta_extra">其它信息</li>
            </ul>
        </div>
    </div>
</div>

苏南大叔:weui框架组件小白入门指南:panel面板如何使用? - weui-panel-文字列表附来源
weui框架组件小白入门指南:panel面板如何使用?(图11-10)

效果图如下:

苏南大叔:weui框架组件小白入门指南:panel面板如何使用? - weui-panel-文字列表附来源2
weui框架组件小白入门指南:panel面板如何使用?(图11-11)

这种列表中,因为没有图片,所以实用性上来说,是打了折扣的。个人认为:其中的附件信息的灰色区域,却可以补充进图文列表里面。作为更丰富的文章列表表现样式。

相关链接

总结

panel面板对于苏南大叔来说,更多的意义是list。不过,既然weui里面叫做panel,我们就顺着人家的意思来叫吧。在展示各种列表的时候,这个panel组件是很常用的。您说是么?

更多weui组件小白使用指南,请点击下面的链接:

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

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

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

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