Section 区块

区块常用于页面不同业务的分段描述

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
√	√	√	√	√	√	√

示例

基础用法

<pi-section title="基础用法" />

默认区块带描述

可通过desc 在标签尾部添加描述

<pi-section title="基础用法" desc="带描述" />

显示右箭头

1. 可通过extra-text设置右侧文字
2. 可通过show-right-icon设置是否显示右箭头, 默认值为false

<pi-section title="显示右箭头" extra-text="更多" show-right-icon />

隐藏左侧竖线

可通过line设置是否显示左侧竖线, 默认值为true

<pi-section title="隐藏左侧竖线" extra-text="更多" :line="false" show-right-icon />

自定义左侧竖线样式

可通过line-style设置左侧竖线样式

<pi-section
  title="自定义左侧竖线样式"
  extra-text="更多"
  :line-style="{ width: '12rpx', backgroundColor: '#ff508a' }"
  show-right-icon
/>

显示下边框

可通过border设置下边框是否显示, 默认值为false

<pi-section title="显示下边框" extra-text="更多" border show-right-icon />

自定义标题

<pi-section show-right-icon>
  <pi-loading show />
  <text>自定义标题</text>
</pi-section>

自定义右侧箭头

<pi-section
  title="自定义右侧箭头"
  show-right-icon
  :right-icon="{ name: 'next', color: '#cccccc' }"
/>

API

Props

Basic Options

名称	描述	类型	必选	默认值
customStyle	自定义样式，对象形式	Object	false	{}
customClass	自定义样式类，字符串形式	String	false	''
lineStyle	自定义竖线样式，对象形式	Object	false	{}
title	标题	String	false	''
titleStyle	标题自定义样式，对象形式	Object	false	{}
desc	描述	String	false	''
descStyle	描述自定义样式，对象形式	Object	false	{}
extraText	右侧文字	String	false	''
extraStyle	右侧文字自定义样式，对象形式	Object	false	{}
border	是否显示边框	Boolean	false	false
line	是否显示左侧竖线	Boolean	false	true
padding	列表项内边距	String	false	'24rpx 0'
showRightIcon	是否显示右边icon。默认是箭头（可以自定义设置成其他图标）	Boolean	false	false
rightIcon	右侧icon样式, 对象形式, 详细看下表	Object	false	{   name: 'right', dot: false,   badge: '', color: '#cccccc',   size: '', classPrefix:   'pi-icon-' }

rightIcon 属性

参数	说明	类型	可选值	默认值
name	图标名称或图片链接	Object	-	'right'
dot	是否显示图标右上角小红点	Boolean	true	false
badge	图标右上角徽标的内容	String	-	''
color	图标颜色	String	-	'#cccccc'
size	图标字体大小，单位rpx	Number/String	-	默认使用字体大小
classPrefix	类名前缀，用于使用自定义图标	String	-	'pi-icon-'

Slots

名称	说明
default	title
desc	描述
right	右侧内容

Scss Variable

本组件用到的scss变量，可在uni.scss中覆盖

$pi-section-border-color: #f4f4f4 !default; // 区块边框颜色
$pi-section-border-width: 4rpx !default; // 区块边框宽度
$pi-section-title-fontsize: 30rpx !default; // 区块标题字体大小
$pi-section-title-color: #333333 !default; // 区块标题字体大小
$pi-section-desc-fontsize: 28rpx !default; // 区块描述字体大小
$pi-section-desc-color: #999999 !default; // 区块描述字体大小
$pi-section-extra-fontsize: 24rpx !default; // 区块描述字体大小
$pi-section-extra-color: #999999 !default; // 区块描述字体大小