Tantalum UI

Appearance

Return to top
On this page

ScrollTab/ScrollTabItem 标签滚动布局

vue
<template>
  <ta-group class="exp-scrollTab" title="基础用法">
    <!-- <div class="exp-scrollTab-header">占位头部</div> -->
    <ta-scroll-tab
      ref="scrollTabRef"
      class="exp-scrollTab-boxes"
      :sideBar="true"
      :enablePullRefreshDown="true"
      :enablePullRefreshUp="true"
      :documentContainer="true"
      :pullRefreshTexts="texts"
      v-model="value"
      :stickyOffsetTop="offsetTop"
      :stickyOffsetBottom="offsetBottom"
      @change="onChange"
      @pullRefreshing="onPullRefreshing"
    >
      <ta-scroll-tab-item name="Dust Red">
        <div class="exp-scrollTab-box box-1"></div>
      </ta-scroll-tab-item>
      <ta-scroll-tab-item name="Volcano">
        <div class="exp-scrollTab-box box-2"></div
      ></ta-scroll-tab-item>
      <ta-scroll-tab-item name="Sunset Orange">
        <div class="exp-scrollTab-box box-3"></div
      ></ta-scroll-tab-item>
      <ta-scroll-tab-item name="Calendula Gold">
        <div class="exp-scrollTab-box box-4"></div
      ></ta-scroll-tab-item>
      <ta-scroll-tab-item name="Sunrise Yellow">
        <div class="exp-scrollTab-box box-5"></div
      ></ta-scroll-tab-item>
      <ta-scroll-tab-item name="Lime">
        <div class="exp-scrollTab-box box-6"></div
      ></ta-scroll-tab-item>
      <ta-scroll-tab-item name="Polar Green">
        <div class="exp-scrollTab-box box-7"></div
      ></ta-scroll-tab-item>
      <ta-scroll-tab-item name="Cyan">
        <div class="exp-scrollTab-box box-8"></div
      ></ta-scroll-tab-item>
      <ta-scroll-tab-item name="Daybreak Blue">
        <div class="exp-scrollTab-box box-9"></div
      ></ta-scroll-tab-item>
      <ta-scroll-tab-item name="Geek Blue">
        <div class="exp-scrollTab-box box-10"></div
      ></ta-scroll-tab-item>
      <ta-scroll-tab-item name="Golden Purple">
        <div class="exp-scrollTab-box box-11"></div
      ></ta-scroll-tab-item>
      <ta-scroll-tab-item name="Magenta">
        <div class="exp-scrollTab-box box-12"></div
      ></ta-scroll-tab-item>
    </ta-scroll-tab>
  </ta-group>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import type {
  ScrollTabOnChange,
  ScrollTabOnPullRefreshing,
  ScrollTabPullRefreshTexts,
  ScrollTabRef
} from '@/index'

export default defineComponent({
  name: 'ExpScrollTab',
  setup() {
    const scrollTabRef = ref<ScrollTabRef | null>(null)
    const value = ref('Dust Red')

    const onChange: ScrollTabOnChange = res => {
      console.log('change', res)
    }

    const onPullRefreshing: ScrollTabOnPullRefreshing = ({ pullDirection }, loadComplete) => {
      console.log(pullDirection)
      setTimeout(() => loadComplete(), 2000)
    }

    const texts: ScrollTabPullRefreshTexts = {
      pullingDown: '下拉刷新2',
      holding: '松开刷新2',
      refreshing: '刷新中2'
    }

    onMounted(() => {
      // scrollTabRef.value?.scrollToIndex(2)
    })

    return {
      value,
      scrollTabRef,

      offsetTop: 52,
      offsetBottom: 12,
      texts,

      onPullRefreshing,
      onChange
    }
  }
})
</script>

Import

js
import { TaScrollTab, TaScrollTabItem } from 'tantalum-ui-mobile'

具体的引入方式可以参考引入组件。

Import Type

组件导出的类型定义：

ts
import type { ScrollTabOnChange, ScrollTabRef } from 'tantalum-ui-mobile'

ScrollTab

ScrollTab Props

属性类型默认值必填说明
sticky-offset-topstring | number0否数值默认是 px，也支持 vw/vh
sticky-offset-bottomstring | number0否数值默认是 px，也支持 vw/vh
side-barbooleantrue否使用侧边 Tab

ScrollTab Events

事件描述回调函数参数TypeScript 函数
change切换时触发(name: string, activeIndex: number)ScrollTabOnChange
refreshing下拉刷新时触发payload: ( pullDirection: 'up' | 'down', done: () => void ) 其中 pullDirection 指下拉的方向，done 指刷新完毕回调的函数ScrollTabOnPullRefreshing
scroll滚动时触发payload: { scrollLeft: number, scrollTop: number, scrollWidth: number, scrollHeight: number }ScrollTabOnScroll

ScrollTab Slots

#default

注：其中只可放置 ScrollTabItem 组件，否则会导致未定义的行为。

vue
<ta-scroll-tab>
  <ta-scroll-tab-item name="Dust Red">
    <div class="scroll-tab-box box-1"></div>
  </ta-scroll-tab-item>
  <ta-scroll-tab-item name="Volcano">
    <div class="scroll-tab-box box-2"></div>
  </ta-scroll-tab-item>
  <ta-scroll-tab-item name="Sunset Orange">
    <div class="scroll-tab-box box-3"></div>
  </ta-scroll-tab-item>
  ...
</ta-scroll-tab>

Methods

ts
interface ScrollTabRef {
  scrollTo: (name: string) => void
  scrollToIndex: (index: number) => void
}
方法名说明
scrollTo切换到指定 name 的 Item
scrollToIndex切换到指定 index 的 Item

ScrollTabItem

ScrollTabItem Props

属性类型默认值必填说明
namestring是唯一标识，设置后配合 ScrollTab 组件的 v-model 和 change 使用
titlestring否分组名，也应用于吸附，如果没有设置则获取 name 的值

ScrollTabItem Slots

#default

vue
<ta-scroll-tab-item name="Dust Red">
  <div class="scroll-tab-box box-1"></div>
</ta-scroll-tab-item>