@wines/indexer

Index 索引选择器

用于通讯录、城市选择的索引选择器。

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "Indexer",
  "usingComponents": {
    "wux-indexer": "@wines/indexer",
    "wux-indexer-item": "@wines/indexer/item"
  }
}

示例

注意：示例中组件为了撑满屏，设置高度为 100%，继承了父级元素高度，所以需要设置 Page{ height: 100% }，否则会导致组件右侧导航点击无效。

<wux-indexer height="100%" bind:change="onChange">
	<wux-indexer-item wx:for="{{ alphabet }}" wx:key="index" name="{{ item.initial }}">
		<view
		 class="demo-item"
		 wx:for="{{ item.cells }}"
		 wx:for-item="cell"
		 wx:for-index="cellIndex"
		 wx:key="cellIndex"
		>{{ cell }}
		</view>
	</wux-indexer-item>
</wux-indexer>

API

Indexer props

| 参数 | 类型 | 描述 | 默认值 | | ------------- | -------------------------- | -------------- | ----------- | | prefixCls | string | 自定义类名前缀 | wux-indexer | | height | string,number | 设置容器的高度 | 300 | | showIndicator | boolean | 是否显示提示框 | true |

Indexer externalClasses

| 名称 | 描述 | | --------- | ------------ | | wux-class | 根节点样式类 |

indexerItem props

| 参数 | 类型 | 描述 | 默认值 | | --------- | -------- | -------------- | ---------------- | | prefixCls | string | 自定义类名前缀 | wux-indexer-item | | name | string | 名称 | - |

IndexerItem slot

| 名称 | 描述 | | ---- | ---------- | | - | 自定义内容 |

IndexerItem externalClasses

| 名称 | 描述 | | --------- | ------------ | | wux-class | 根节点样式类 |