Section 分段器

用作不同视图的切换显示。

代码演示

基础用法

通过list展示分段器的标题名称。

<hd-section :list="list"></hd-section>

const list = ref<string[]>(['简介', '详情', '评论', '打赏']) // 或者[{name: '简介'}, {name: '详情'}, {name: '评论'}, {name: '打赏'}]

自定义组件颜色

当不设置mode或者mode=button时，通过buttonColor设置滑块背景颜色，通过bgColor设置组件背景颜色。

<hd-section :list="list" buttonColor="#999" bgColor="#f3f4f5"></hd-section>

切换动画效果

animation控制是否存在滚动动画切换，默认存在动画true。

<hd-section :list="list" :animation="false"></hd-section>

切换振动效果

当作用于微信小程序时，通过设置vibrateShort，在切换时使手机产生短促振动。

<hd-section :list="list" :vibrateShort="true"></hd-section>

Props

Name	Description	Type	Required	Default
list	数据集合	Array	false	[]
current	当前激活项的下标	Number / String	false	默认值：0
activeColor	激活项的颜色	String	false	默认值：#202124
mode	模式	'button（按钮形式）' / 'subsection（分段模式）'	false	默认值：button
fontSize	字体大小，单位rpx	Number / String	false	默认值：28
animation	是否开启动画效果	Boolean	false	默认值：true
height	组件的高度，单位rpx	Number / String	false	默认值：70
bold	激活项的字体是否加粗	Boolean	false	默认值：true
bgColor	组件背景颜色（ mode=button时生效）	String	false	默认值：#EBECEE
buttonColor	滑块背景颜色（ mode=button时生效）	String	false	默认值：#ffffff
vibrateShort	切换选项时是否振动	Boolean	false	默认值：false

Events

Event Name	Description	Parameters
change	选项切换时触发	value:Number 被激活项的下标