weui框架组件小白入门指南：panel面板如何使用？

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

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

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

基本结构

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

• weui-panel__hd，hd=>head。
• weui-panel__bd，bd=>body。
• weui-panel__ft，ft=>foot。

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

样式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>

效果图：

样式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>

效果图：

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

<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>

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

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

样式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>

效果图如下：

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

相关链接

• https://github.com/Tencent/weui/wiki/Panel

总结

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

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

• https://newsn.net/tag/weui/

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