Index 索引选择器
用于通讯录、城市选择的索引选择器。
使用指南
在 page.json 中引入组件
{
"navigationBarTitleText": "Index",
"usingComponents": {
"wux-index": "../../dist/index/index",
"wux-index-item": "../../dist/index-item/index"
}
}
示例
<wux-index height="100%" bind:change="onChange">
<wux-index-item wx:for="{{ alphabet }}" wx:key="" name="{{ item.initial }}">
<view class="demo-item" wx:for="{{ item.cells }}" wx:for-item="cell" wx:key="">{{ cell }}</view>
</wux-index-item>
</wux-index>
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']
Page({
data: {
alphabet: [],
},
onLoad() {
const alphabet = []
'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('').forEach((initial) => {
const cells = NAMES.filter((name) => name.charAt(0) === initial)
alphabet.push({
initial,
cells
})
})
this.setData({
alphabet,
})
},
onChange(e) {
console.log('onChange', e.detail)
},
})
视频演示
Index
API
Index props
参数 |
类型 |
描述 |
默认值 |
prefixCls |
string |
自定义类名前缀 |
wux-index |
height |
string,number |
设置容器的高度 |
300 |
showIndicator |
boolean |
是否显示提示框 |
true |
Index externalClasses
indexItem props
参数 |
类型 |
描述 |
默认值 |
prefixCls |
string |
自定义类名前缀 |
wux-index-item |
name |
string |
名称 |
- |
IndexItem slot
IndexItem externalClasses