qrcode
扫描二维码查看 H5 演示效果
qrcode
扫描二维码查看演示效果
taro-ui, 非 taro-ui-vue3
wxapp

Indexes 索引选择器

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

使用指南

在 Taro 文件中引入组件

import { AtIndexes } from 'taro-ui-vue3'

组件依赖的样式文件（仅按需引用时需要）

@import "taro-ui-vue3/dist/style/components/indexes.scss";

一般用法

说明:

  • AtIndexes 需要父节点设置高度，如果想整个高度屏幕高度都铺满，设置 height: 100vh。
<template>
  <view class="page" style="height: 100vh;">
    <!-- 基础用法 -->
    <view style="height: 100%;">
      <AtIndexes
        :list="mockData"
        topKey="Top"
        @click="onClick"
        @scroll-into-view="handleScroll"
      >
        <view class="custom-area">
          用户自定义内容
          <AtSearchBar
            :value="value"
            @change="handleChange"
            placeholder="跳转到指定Key"
            @action-click="handleActionClick"
          />
        </view>
      </AtIndexes>
    </view>
  </view>
</template>

跳转到指定key

html
<template>
  <view>
    <AtIndexes
      :list="list"
      @scroll-into-view="handleScroll"
    >
      <view class='custom-area'>
        用户自定义内容
        <AtSearchBar  
          placeholder='跳转到指定Key' 
          @action-click="handleActionClick" 
        />
      </view>
    </AtIndexes>
  </view>
</template>
<script>
import mockData from './mock-data'
export default {
  name: 'AtIndexesDemo',
  data() {
    return {
      value: '',
      list: mockData,
      scrollToView: null
    }
  },
  methods: {
    handleActionClick() {
      if (!this.value) {
        return
      }
      this.scrollToView && this.scrollToView(this.value.toUpperCase())
      this.value = ''
    },
    handleScroll(fn) {
      this.scrollToView = fn
    }
  }
}
</script>

参数

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

事件

事件名称说明返回参数
onClick点击列表项触发事件(item:Object,event) => void
onScrollIntoView获取跳转事件跳转到指定key(fn:Function) => void