安装

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

[![install size][install-size-image]][install-size-url]