Tantalum UI

ScrollView 滚动区 

import {
  TaScrollView,
  TaGroup,
  ScrollViewOnRefreshing,
  ScrollViewOnScrollToLower,
  ScrollViewOnScrollToUpper,
  showToast
} from '@/index'

export default function ExpScrollView() {
  const onRefreshing: ScrollViewOnRefreshing = (res, done) => {
    setTimeout(() => {
      done()
    }, 2000)
  }

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

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

  return (
    <>
      <TaGroup title="垂直滚动">
        <TaScrollView className="exp-scrollView-box" scrollY>
          <div className="exp-scrollView-h-400">
            <p>垂直滚动条</p>
            <p>scrollY="true"</p>
          </div>
        </TaScrollView>
      </TaGroup>
      <TaGroup title="水平滚动">
        <TaScrollView className="exp-scrollView-box" scrollX>
          <div className="exp-scrollView-w-750">
            <p>水平滚动条 scrollX="true"</p>
          </div>
        </TaScrollView>
      </TaGroup>
      <TaGroup title="事件监听">
        <TaScrollView
          className="exp-scrollView-box"
          scrollX
          scrollY
          onScrollToUpper={onScrollUpper}
          onScrollToLower={onScrollLower}
        >
          <div className="exp-scrollView-wh">
            <p>垂直水平滚动条</p>
            <p>scrollY="true"</p>
            <p>scrollX="true"</p>
            <p>监听到顶/底/最左/最右的事件</p>
          </div>
        </TaScrollView>
      </TaGroup>
      <TaGroup title="下拉刷新">
        <TaScrollView
          className="exp-scrollView-box"
          enablePullDirections={['down', 'right', 'up', 'left']}
          scrollY
          onRefreshing={onRefreshing}
        >
          <div className="exp-scrollView-h-400">
            <p>开启4个方向的拉动刷新</p>
            <p>scrollY="true"</p>
            <p>enablePullDirections="['down', 'right', 'up', 'left']"</p>
            <p>由于有 scrollY，上拉刷新要先滚到最底部</p>
          </div>
        </TaScrollView>
      </TaGroup>
      <TaGroup title="下拉刷新（自定义指示器）">
        <TaScrollView
          className="exp-scrollView-box"
          enablePullDirections="down"
          scrollY
          onRefreshing={onRefreshing}
          renderIndicator={slotProps => (
            <>
              方向：{slotProps.pullDirection} 状态：{slotProps.pullRefreshState}
            </>
          )}
        >
          <div className="exp-scrollView-h-400">
            <p>自定下拉义指示器</p>
            <p>scrollY="true"</p>
            <p>enablePullDirections="down"</p>
          </div>
        </TaScrollView>
      </TaGroup>
    </>
  )
}

注：

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

Import 

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

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

Import Type

组件导出的类型定义：

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

Props

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

Events

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

Slots

children 

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

下拉指示器（renderIndicator） 

<TaScrollView
  className="exp-scrollView-box"
  scrollY
  renderIndicator={slotProps => (
    <>
      方向：{slotProps.pullDirection} 状态：{slotProps.pullRefreshState}
    </>
  )}
></TaScrollView>