Panel 面板

fui-panel 用于展示图文列表，可配置标题、缩略图、摘要和辅助信息。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<template>
  <!-- 图文面板 -->
  <fui-panel :panelData="panelData" @click="handlePanelClick" />
</template>

<script>
export default {
  data() {
    return {
      // 面板标题与图文列表
      panelData: {
        head: '最新消息',
        list: [{ title: '组件更新', desc: '查看最新的组件使用说明' }]
      }
    };
  },
  methods: {
    /** 处理面板项点击 */
    handlePanelClick(item) {
      uni.showToast({ title: item.title, icon: 'none' });
    }
  }
};
</script>

数据结构

panelData 默认使用 head 作为面板标题，list 作为列表。列表项可包含 src、title、desc、source、time、extra，分别表示图片、标题、摘要、来源、时间和附加信息。通过 fields 可将这些默认字段映射到业务数据中的其他键名。

属性

尺寸和间距默认单位为 rpx。

属性	类型	说明	官网默认值
panelData	Object	面板数据	{}
fields	Object	数据字段名映射	{}
background	String	面板背景色	#fff
highlight	Boolean	点击列表项时是否显示反馈	true
flexStart	Boolean	图片和文本是否顶部对齐	false
rowReverse	Boolean	图片是否显示在内容右侧	false
marginTop	Number / String	上外边距	0
marginBottom	Number / String	下外边距	0
padding	Number / String	左右内边距	32
hdBorder	Boolean	是否显示标题下方分隔线	true
hdLeft	Number / String	标题分隔线左侧间距	32
hdRight	Number / String	标题分隔线右侧间距	0
hdBackground	String	标题背景色	#fff
headSize	Number / String	面板标题字体大小	32
headColor	String	面板标题颜色	#181818
bdBorder	Boolean	是否显示列表项之间的分隔线	true
bdLeft	Number / String	列表分隔线左侧间距	32
bdRight	Number / String	列表分隔线右侧间距	0
width	Number / String	图片宽度	120
height	Number / String	图片高度	120
radius	Number / String	图片圆角	0
size	Number / String	列表项标题字体大小	32
color	String	列表项标题颜色	#181818
fontWeight	Number / String	列表项标题字重	normal
descSize	Number / String	摘要字体大小	28
descColor	String	摘要颜色	#7F7F7F
infoSize	Number / String	辅助信息字体大小	24
infoColor	String	辅助信息颜色	#b2b2b2
isBorder	Boolean	是否显示面板上下边框	true
borderColor	String	边框和分隔线颜色	#eee

事件

事件	说明	回调参数
click	点击列表项时触发	包含 index 和当前列表项字段的对象

插槽

插槽	说明
default	列表之后的自定义内容

平台说明

本地源码中，非 nvue 平台的部分颜色属性默认为空字符串，由样式变量提供颜色；nvue 使用表中的颜色默认值。本地源码的面板标题内联颜色拼接了 rpx，显式设置 headColor 时请留意实际显示效果。