IndexList 索引列表

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
兼容中	√	√	兼容中	兼容中	兼容中	兼容中

基本使用

需要被列表外层包裹tn-index-list组件，然后每段数据的锚点通过tn-index-anchor组件进行传入，其余内容用户可以自定义。

• 通过tn-index-list的indexList参数设置索引列表。
• 通过tn-index-anchor的index参数设置当前锚点对应索引列表的名称。
• 该组件需要在外部监听scroll事件，然后将scrollTop(滚动条高度)的值传递给tn-index-list。
  • 如果是在页面进行使用，则监听onPageScroll事件。
  • 如果是在scroll-view标签中使用，则监听scroll事件。

注意

tn-index-anchor的index参数的值必须要在tn-index-list的indexList参数的列表中存在并且是相对应的才可以跳转到指定的锚点。

<template>
  <tn-index-list :scrollTop="scrollTop">
    <view v-for="(item, index) in indexList" :key="index">
      <tn-index-anchor :index="item" />
      <view class="list-cell">
        列表1
      </view>
      <view class="list-cell">
        列表2
      </view>
      <view class="list-cell">
        列表3
      </view>
    </view>
  </tn-index-list>
</template>

<script>
  export default {
    data() {
      return {
        scrollTop: 0,
        indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
      }
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    }
  }
</script>

自定义锚点样式

tn-index-anchor锚点组件默认显示的是index的值，可以设置useSlot参数为true，然后传入自定义内容即可。

<template>
  <tn-index-list :scrollTop="scrollTop">
    <view v-for="(item, index) in indexList" :key="index">
      <tn-index-anchor :index="item" :useSlot="true">
        <view class="custom-anchor">{{ item }}</view>
      </tn-index-anchor>
      <view class="list-cell">
        列表1
      </view>
      <view class="list-cell">
        列表2
      </view>
      <view class="list-cell">
        列表3
      </view>
    </view>
  </tn-index-list>
</template>

<script>
  export default {
    data() {
      return {
        scrollTop: 0,
        indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
      }
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    }
  }
</script>

<style lang="scss" scoped>
  .list-cell {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 24rpx;
    overflow: hidden;
    color: #323233;
    font-size: 14px;
    line-height: 24px;
    background-color: #fff;
  }
</style>

自定义导航栏/在指定容器中使用

默认情况下，该组件的锚点是在导航栏的下面，如果您使用了自定义导航栏或者在指定的容器中使用，则需要设置锚点吸合的高度和距离顶部的距离(自定义导航栏的高度)。也就是设置stickyTop和customBarHeight的值，单位均为px。

• 如果取消了自定义导航栏或者没有在指定的容器中使用，需要设置stickyTop和customBarHeight的值为0。

<tn-index-list :scrollTop="scrollTop" :stickyTop="0" :customBarHeight="44">
  <view v-for="(item, index) in indexList" :key="index">
    <tn-index-anchor :index="item" />
    <view class="list-cell">
      列表1
    </view>
    <view class="list-cell">
      列表2
    </view>
    <view class="list-cell">
      列表3
    </view>
  </view>
</tn-index-list>

API

IndexList Props

属性名	说明	类型	默认值	可选值
indexList	索引字符列表	Array	A-Z字符数组	-
sticky	是否自动吸顶	Boolean	true	false
stickyTop	吸顶距离，吸顶时距离容器的高度，单位px	Number	0	-
customBarHeight	自定义顶部(导航栏的高度)，单位px	Number	0	-
scrollTop	当前滚动的高度，由于自定义组件无法获取外部的高度，所以需要进行传入	Number	0	-
activeColor	锚点和索引字符被选中时的颜色	String	#01BEFF	-
zIndex	锚点吸顶时的z-index	Number	19070	-

IndexList Slots

名称	说明
default	索引列表的内容

IndexList Event

事件名称	说明	回调参数
select	右边索引被选中时触发	index: 选中的索引字符，scrollTop: 当前滚动到对应的距离

IndexAnchor Props

属性名	说明	类型	默认值	可选值
index	索引字符，与所有列表中的字符对应	String	-	-
useSlot	使用自定义内容作为锚点内容	Boolean	false	true
customStyle	自定义锚点内容样式	Object	-	-

IndexList Slots

名称	说明
default	锚点显示的内容，默认时索引字符