Index 索引选择器

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

使用指南

在 page.json 中引入组件

  1. {
  2. "navigationBarTitleText": "Index",
  3. "usingComponents": {
  4. "wux-index": "../../dist/index/index",
  5. "wux-index-item": "../../dist/index-item/index"
  6. }
  7. }

示例

  1. <wux-index height="100%" bind:change="onChange">
  2. <wux-index-item wx:for="{{ alphabet }}" wx:key="" name="{{ item.initial }}">
  3. <view class="demo-item" wx:for="{{ item.cells }}" wx:for-item="cell" wx:key="">{{ cell }}</view>
  4. </wux-index-item>
  5. </wux-index>
  1. const NAMES = ['Aaron', 'Alden', 'Austin', 'Baldwin', 'Braden', 'Carl', 'Chandler', 'Clyde', 'David', 'Edgar', 'Elton', 'Floyd', 'Freeman', 'Gavin', 'Hector', 'Henry', 'Ian', 'Jason', 'Joshua', 'Kane', 'Lambert', 'Matthew', 'Morgan', 'Neville', 'Oliver', 'Oscar', 'Perry', 'Quinn', 'Ramsey', 'Scott', 'Seth', 'Spencer', 'Timothy', 'Todd', 'Trevor', 'Udolf', 'Victor', 'Vincent', 'Walton', 'Willis', 'Xavier', 'Yvonne', 'Zack', 'Zane']
  2. Page({
  3. data: {
  4. alphabet: [],
  5. },
  6. onLoad() {
  7. const alphabet = []
  8. 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('').forEach((initial) => {
  9. const cells = NAMES.filter((name) => name.charAt(0) === initial)
  10. alphabet.push({
  11. initial,
  12. cells
  13. })
  14. })
  15. this.setData({
  16. alphabet,
  17. })
  18. },
  19. onChange(e) {
  20. console.log('onChange', e.detail)
  21. },
  22. })

视频演示

Index

API

Index props

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

Index externalClasses

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

indexItem props

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

IndexItem slot

名称 描述
- 自定义内容

IndexItem externalClasses

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