Tantalum UI

Sticky/StickyView/StickyViewItem 粘性布局 

import { TaStickyView, TaGroup, StickyViewOnChange } from '@/index'

export default function ExpSticky() {
  const onChange: StickyViewOnChange = res => {
    console.log('change', res)
  }

  return (
    <>
      <TaGroup title="Sticky View">
        <TaStickyView className="exp-sticky-box" onChange={onChange}>
          <TaStickyView.Item name="Sticky 1">
            <div className="exp-sticky-box-1"></div>
          </TaStickyView.Item>
          <TaStickyView.Item name="Sticky 2">
            <div className="exp-sticky-box-2"></div>
          </TaStickyView.Item>
          <TaStickyView.Item name="Sticky 3">
            <div className="exp-sticky-box-3"></div>
          </TaStickyView.Item>
          <TaStickyView.Item name="Sticky 4">
            <div className="exp-sticky-box-4"></div>
          </TaStickyView.Item>
        </TaStickyView>
      </TaGroup>
    </>
  )
}

Import 

import {
  TaSticky,
  TaStickyView,
  TaStickyViewItem
} from 'tantalum-ui-mobile-react'

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

Import Type

组件导出的类型定义：

import type {
  StickyViewOnChange,
  StickyViewRef
} from 'tantalum-ui-mobile-react'

Sticky

粘性容器。

Sticky Props

属性类型默认值必填说明
containSelectorstring | HTMLElement | Documentdocument否基于哪个容器，如果是 string，则为可以被 document.querySelector(selector) 获取到
offsetTopstring | number0否数值默认是 px，也支持 vw/vh
offsetBottomstring | number0否数值默认是 px，也支持 vw/vh

Sticky Slots

children 

<TaSticky>自定义内容</TaSticky>

StickyView

粘性布局。

StickyView Props

属性类型默认值必填说明
valuestring0否当前布局中展现的子项 name 值
containSelectorstring | HTMLElement | Documentdocument否基于哪个容器，如果是 string，则为可以被 document.querySelector(selector) 获取到
offsetTopstring | number0否数值默认是 px，也支持 vw/vh

StickyView Events

事件描述回调函数参数TypeScript 函数
onChange切换时触发(name: string, activeIndex: number)StickyViewOnChange

StickyView Slots

children

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

<TaGroup title="Sticky View">
  <TaStickyView className="exp-sticky-box" onChange={onChange}>
    <TaStickyView.Item name="Sticky 1">
      <div className="exp-sticky-box-1"></div>
    </TaStickyView.Item>
    <TaStickyView.Item name="Sticky 2">
      <div className="exp-sticky-box-2"></div>
    </TaStickyView.Item>
    <TaStickyView.Item name="Sticky 3">
      <div className="exp-sticky-box-3"></div>
    </TaStickyView.Item>
    <TaStickyView.Item name="Sticky 4">
      <div className="exp-sticky-box-4"></div>
    </TaStickyView.Item>
  </TaStickyView>
</TaGroup>

Methods 

interface StickyViewRef {
  scrollTo: (name: string) => void
  scrollToIndex: (index: number) => void
  scrollToOffset: (offset: number) => void
}
方法名说明
scrollTo切换到指定 name 的 Item
scrollToIndex切换到指定 index 的 Item
scrollToOffset切换到指定位置（单位 px）

StickyViewItem

StickyViewItem Props

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

StickyViewItem Slots

children 

<TaStickyView.Item name="Sticky 1">
  <div className="exp-sticky-box-1"></div>
</TaStickyView.Item>