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：图文组合列表
基本代码：
效果图：
样式2：文字组合列表
这个文字组合列表，实际上就是吧图文组合列表中的图片给去掉而已，不过从代码层面上看的话，就顺带去掉了很多结构了。
基本代码：
效果图：
和图文列表对比主体部分的话，精简的代码也是很多的。下面进行个更明显的代码对比：
样式3：小图文组合列表（重点）
图文组合列表和小图文组合列表，区别就是：
- 图文列表中的图较大一些，有标题和描述文字的位置。
- 小图文列表中的图小一些，只有标题的位置。
基本代码：
这种小图文列表其实是个重点，在各种app里面，因为这个的效果组合起来就是最常见的关于页的效果，很多的选项组合列表。大家更换一下小图片的地址即可。
也就是说，使用“小图文列表”样式，多次叠加相关结构，然后换文字换图片，就可以出现下面的类似效果：
样式4：文字列表附来源
这个文字列表附来源的样式，和图文组合列表这个样式，两者使用场景比较类似了。对于最常见的文章列表的清空，就可以使用这两种样式中的其中一种了。主要的区别也就是带不带图片。
基本结构：
效果图如下：
这种列表中，因为没有图片，所以实用性上来说，是打了折扣的。个人认为：其中的附件信息的灰色区域，却可以补充进图文列表里面。作为更丰富的文章列表表现样式。
相关链接
总结
panel面板对于苏南大叔来说，更多的意义是list。不过，既然weui里面叫做panel，我们就顺着人家的意思来叫吧。在展示各种列表的时候，这个panel组件是很常用的。您说是么？
更多weui组件小白使用指南，请点击下面的链接：
如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。 
【源码】
【绝密】秘籍文章入口，仅传授于有缘之人 
检测到了复制动作，那么是否解决了您的问题？ 