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

Index externalClasses

indexItem props

IndexItem slot

IndexItem externalClasses