Indexes 索引选择器


索引列表组件,可以通过点击索引导航,快速定位到列表处

使用指南

Taro-UI 版本需要在 v1.5.0 以上,在 Taro 文件中引入组件

  1. import { AtIndexes } from 'taro-ui'

组件依赖的样式文件(仅按需引用时需要)

  1. @import "~taro-ui/dist/style/components/toast.scss";
    @import "~taro-ui/dist/style/components/indexes.scss";
    @import "~taro-ui/dist/style/components/list.scss";

一般用法

说明:

  • AtIndexes 需要父节点设置高度,如果想整个高度屏幕高度都铺满,设置 height: 100vh
  1. import Taro from '@tarojs/taro'
    import { View } from '@tarojs/components'
    import { AtIndexes } from 'taro-ui'
    export default class Index extends Taro.Component {
    onClick (item) {
    console.log(item)
    }
    render() {
    const list = [{
    title: 'A',
    key: 'A',
    items: [
    {
    'name': '阿坝'
    // 此处可加其他业务字段
    },
    {
    'name': '阿拉善'
    }]
    },
    {
    title: 'B',
    key: 'B',
    items: [
    {
    'name': '北京'
    },
    {
    'name': '保定'
    }]
    }
    ]
    return (
    <View style='height:100vh'>
    <AtIndexes
    list={list}
    onClick={this.onClick.bind(this)}
    >
    <View>自定义内容</View>
    </AtIndexes>
    </View>
    )
    }

参数

参数说明类型可选值默认值
animation是否开启跳转过渡动画Boolean-false
isVibrate是否切换 key 的震动,只在微信小程序有效Boolean-true
isShowToast是否用弹框显示当前 keyBoolean-true
topKey右侧导航第一个名称String-Top
list[ {title:列表标题,key:右侧导航标题,items:[{name: 列表项内容}]}]Array--

事件

事件名称说明返回参数
onClick点击列表项触发事件(item:Object,event) => void

Indexes索引选择器 - 图1