Tantalum UI

Appearance

Return to top
On this page

ScrollView 滚动区

vue
<template>
  <ta-group title="垂直滚动">
    <ta-scroll-view class="exp-scrollView-box" scroll-y>
      <div class="exp-scrollView-h-400">
        <p>垂直滚动条</p>
        <p>scroll-y="true"</p>
      </div>
    </ta-scroll-view>
  </ta-group>
  <ta-group title="水平滚动">
    <ta-scroll-view class="exp-scrollView-box" scroll-x>
      <div class="exp-scrollView-w-750">
        <p>水平滚动条 scroll-x="true"</p>
      </div>
    </ta-scroll-view>
  </ta-group>
  <ta-group title="事件监听">
    <ta-scroll-view
      class="exp-scrollView-box"
      scroll-x
      scroll-y
      @scroll-to-upper="onScrollUpper"
      @scroll-to-lower="onScrollLower"
    >
      <div class="exp-scrollView-wh">
        <p>垂直水平滚动条</p>
        <p>scroll-y="true"</p>
        <p>scroll-x="true"</p>
        <p>监听到顶/底/最左/最右的事件</p>
      </div>
    </ta-scroll-view>
  </ta-group>
  <ta-group title="下拉刷新">
    <ta-scroll-view
      class="exp-scrollView-box"
      :enable-pull-directions="['down', 'right', 'up', 'left']"
      scroll-y
      @refreshing="onRefreshing"
    >
      <div class="exp-scrollView-h-400">
        <p>开启4个方向的拉动刷新</p>
        <p>scroll-y="true"</p>
        <p>pull-directions="['down', 'right', 'up', 'left']"</p>
        <p>由于有 scroll-y，上拉刷新要先滚到最底部</p>
      </div>
    </ta-scroll-view>
  </ta-group>
  <ta-group title="下拉刷新（自定义指示器）">
    <ta-scroll-view
      class="exp-scrollView-box"
      :enable-pull-directions="['down']"
      scroll-y
      @refreshing="onRefreshing"
    >
      <template #indicator="slotProps">
        <div class="exp-scrollView-indicator">
          方向：{{ slotProps.pullDirection }} 状态：{{ slotProps.pullRefreshState }}
        </div>
      </template>
      <div class="exp-scrollView-h-400">
        <p>自定下拉义指示器</p>
        <p>scroll-y="true"</p>
        <p>pull-directions="['down']"</p>
      </div>
    </ta-scroll-view>
  </ta-group>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import {
  type ScrollViewOnRefreshing,
  type ScrollViewOnScrollToLower,
  type ScrollViewOnScrollToUpper,
  showToast
} from '@/index'

export default defineComponent({
  name: 'ExpScrollView',
  setup() {
    const onRefreshing: ScrollViewOnRefreshing = (res, done) => {
      setTimeout(() => {
        done()
      }, 2000)
    }

    const onScrollUpper: ScrollViewOnScrollToUpper = ({ direction }) => {
      showToast(`滚动到 ${direction}`)
    }

    const onScrollLower: ScrollViewOnScrollToLower = ({ direction }) => {
      showToast(`滚动到 ${direction}`)
    }

    return {
      onRefreshing,
      onScrollUpper,
      onScrollLower
    }
  }
})
</script>

注：

  • 需要给 ScrollView 一个固定高度，通过 CSS 设置 height。

Import

js
import { TaScrollView } from 'tantalum-ui-mobile'

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

Import Type

组件导出的类型定义：

ts
import type {
  ScrollViewPullDirection,
  ScrollViewOnScrollToUpper,
  ScrollViewOnScrollToLower,
  ScrollViewOnRefreshing,
  ScrollViewOnScroll
} from 'tantalum-ui-mobile'

Props

属性类型默认值必填说明
scroll-xbooleanfalse否允许横向滚动
scroll-ybooleanfalse否允许纵向滚动
upper-thresholdstring | number50否距顶部/左边多远时，触发 scroll-to-upper 事件
lower-thresholdstring | number50否距底部/右边多远时，触发 scroll-to-lower 事件
scroll-topstring | number否设置竖向滚动条位置
scroll-leftstring | number否设置横向滚动条位置
scroll-animatedbooleanfalse否在设置滚动条位置时使用动画过渡
enable-pull-directionsScrollViewPullDirection | ScrollViewPullDirection[][]否开启下拉刷新，可以同时开启多个方向，可选值：'up', 'down', 'left', 'right'，搭配 refreshing 事件使用
pull-refresh-thresholdnumber48否设置下拉刷新阈值，自定义 indicator slot 时可以配合修改

Events

事件描述回调函数参数TypeScript 函数
scroll-to-upper滚动到顶部/左边时触发payload: { direction: 'top' | 'left' }ScrollViewOnScrollToUpper
scroll-to-lower滚动到底部/右边时触发payload: { direction: 'bottom' | 'right' }ScrollViewOnScrollToLower
scroll滚动时触发payload: { scrollLeft: number, scrollTop: number, scrollWidth: number, scrollHeight: number }ScrollViewOnScroll
refreshing下拉刷新时触发payload: ( pullDirection: 'up' | 'right' | 'down' | 'left', done: () => void ) 其中 pullDirection 指下拉的方向，done 指刷新完毕回调的函数ScrollViewOnRefreshing

Slots

#default

vue
<ta-scroll-view>自定义内容</ta-scroll-view>

下拉指示器（#indicator）

vue
<ta-scroll-view>
  <template #indicator="slotProps">
    方向：{{ slotProps.pullDirection }} 状态：{{
      slotProps.pullRefreshState
    }}
  </template>
</ta-scroll-view>