1.0.2 • Published 3 years ago
@mas.io/adc-index-bar v1.0.2
安装
tnpm install --save @alipay/adc-index-bar组件介绍
能力中心小程序索引列表组件，配合adc-index-anchor使用，可自定义列表样式，满足业务需求。
参数说明
| 属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 | |
|---|---|---|---|---|---|---|
| sticky | 否 | boolean | 是否开启锚点自动吸顶 | true | true | |
| zIndex | 否 | number | z-index层级 | 100 | 101 | |
| highlightColor | 否 | string | 索引字符高亮颜色 | #07c160 | #000 | |
| stickyOffsetTop | 否 | number | 锚点自动吸顶时与顶部的距离 | 0 | 72 | |
| scrollWithAnimation | 否 | boolean | 是否开启滚动动画 | true | false | |
| scrollAnimationDuration | 否 | number | 动画执行时间 | 300 | 500 | |
| indexList | 是 | array | 索引字符列表 string[] | number[] | A-Z | [] |
在小程序中使用
{
"usingComponents": {
"mas-adc-index-bar": "@alipay/adc-index-bar/es/index"
}
}在 page.axml 中引用组件
<!-- 页面使用方式 -->
<adc-index-bar indexList="{{indexList}}">
<block a:for="{{list}}">
<adc-index-anchor index="{{item.title}}" />
<view onTap="switchHandle" a:for="{{item.arr}}" a:for-item="itemName">{{itemName}}</view>
</block>
</adc-index-bar>Badges
