Tantalum UI

Appearance

Return to top
On this page

Sticky/StickyView/StickyViewItem 粘性布局

vue
<template>
  <ta-group title="Sticky View">
    <ta-sticky-view ref="viewRef" class="exp-sticky-box" v-model="activeName" @change="onChange">
      <ta-sticky-view-item v-for="i in 4" :key="i" :name="`Sticky ${i}`">
        <div :class="`exp-sticky-box-${i}`"></div>
      </ta-sticky-view-item>
    </ta-sticky-view>
    <!-- <div class="exp-sticky-box" id="stickyContainer">
      <div class="exp-sticky-header">
        头部
      </div>
      <div class="exp-sticky-box-1">
        <ta-sticky-view :container="'#stickyContainer'" :offset-top="50">哈哈哈</ta-sticky-view>
      </div>
    </div> -->
  </ta-group>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import type { StickyViewOnChange, StickyViewRef } from '@/index'

export default defineComponent({
  name: 'ExpSticky',
  setup() {
    const activeName = ref('Sticky 1')
    const viewRef = ref<StickyViewRef | null>(null)

    const onChange: StickyViewOnChange = (name, index) => {
      console.log('change', name, index)
    }

    onMounted(() => {
      // viewRef.value?.scrollTo("Sticky 2")
    })

    return {
      viewRef,
      activeName,

      onChange
    }
  }
})
</script>

Import

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

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

Import Type

组件导出的类型定义：

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

Sticky

粘性容器。

Sticky Props

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

Sticky Slots

#default

vue
<ta-sticky>自定义内容</ta-sticky>

StickyView

粘性布局。

StickyView Props

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

StickyView Events

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

StickyView Slots

#default

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

vue
<ta-sticky-view>
  <ta-sticky-view-item name="Sticky 1">
    <div class="sticky-box-1"></div>
  </ta-sticky-view-item>
  <ta-sticky-view-item name="Sticky 1">
    <div class="sticky-box-1"></div>
  </ta-sticky-view-item>
  <ta-sticky-view-item name="Sticky 2">
    <div class="sticky-box-2"></div>
  </ta-sticky-view-item>
  <ta-sticky-view-item name="Sticky 3">
    <div class="sticky-box-3"></div>
  </ta-sticky-view-item>
  <ta-sticky-view-item name="Sticky 4">
    <div class="sticky-box-4"></div>
  </ta-sticky-view-item>
</ta-sticky-view>

Methods

ts
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 组件的 v-model 和 change 使用
titlestring否分组名，也应用于吸附，如果没有设置则获取 name 的值

StickyViewItem Slots

#default

vue
<ta-sticky-view-item name="Sticky 1">
  <div class="sticky-box-1"></div>
</ta-sticky-view-item>