Components

Scroll View

Headless scroll container primitive with edge thresholds and an optional main-thread bounce/overscroll system.

Overview

ScrollView is a headless @vyui/core scroll container. By default it is a thin wrapper that forwards native scrolling and edge-threshold events; opt into enableBounces for a custom main-thread bounce/overscroll system with parity to lynx-ui.

This is a vyui-original @vyui/core primitive (adapted from lynx-ui, Apache 2.0). Behavior only, no styles.

Usage

<script setup lang="ts">
import { ScrollView } from '@vyui/core'

function onLower() {
  // load more
}
</script>

<template>
  <ScrollView
    scroll-orientation="vertical"
    :lower-threshold="80"
    @scroll-to-lower="onLower"
  >
    <view
      v-for="n in 50"
      :key="n"
      class="p-4"
    >
      <text>Row {{ n }}</text>
    </view>
  </ScrollView>
</template>

Features and behavior

scrollOrientation chooses 'vertical' (default) or 'horizontal'.
upperThreshold / lowerThreshold set the distance from each edge that fires scrollToUpper / scrollToLower — useful for infinite loading.
bounces forwards the native bounce (iOS / Harmony / PC); scrollBarEnable shows the native scroll bar.
enableBounces turns on the custom main-thread bounce. Then startBounceTriggerDistance / endBounceTriggerDistance, alwaysBouncing, and the bounce edges control overscroll, emitting scrollToBounces.
id is required by the bounce system to select the container on the main thread; it is auto-generated when omitted.

API

Props

Prop	Default	Type
`alwaysBouncing`	`true`	`boolean \| undefined` Allow bouncing even when the content is smaller than the viewport.
`bounces`	`true`	`boolean \| undefined` Enable native bounce on iOS / Harmony / PC. Ignored when `enableBounces` turns on the custom main-thread bounce.
`debugLog`	`false`	`boolean \| undefined` Emit verbose bounce diagnostics to the console.
`disabled`	`false`	`boolean \| undefined` Disable scrolling.
`enableBounceEventInFling`	`true`	`boolean \| undefined` Fire `scrollToBounces` when the bounce is reached during a fling, not only during a finger-down drag.
`enableBounces`	`false`	`boolean \| undefined` Turn on the custom main-thread bounce/overscroll system. When `false` (default) the component is a thin wrapper that only forwards the native `bounces` prop.
`enableRTL`	`false`	`boolean \| undefined` Mirror horizontal bounce direction for RTL layouts.
`endBounceTriggerDistance`	`0`	`number \| undefined` Overscroll distance (px) past the lower edge required to fire `scrollToBounces` with `{ direction: 'lower' }`.
`estimatedHeight`	—	`number \| undefined` Size hint (px) used by the bounce maths before the first layout pass.
`estimatedWidth`	—	`number \| undefined` Horizontal size hint (px) used before first layout.
`id`	—	`string \| undefined` Stable id for the scroll container. Required by the bounce system to select the container / bounce wrappers on the main thread. Auto-generated when omitted.
`lowerThreshold`	`0`	`number \| undefined` Distance (px) from the lower edge that fires `scrollToLower`.
`scrollBarEnable`	`true`	`boolean \| undefined` Show the native scroll bar.
`scrollOrientation`	`"vertical"`	`"vertical" \| "horizontal" \| undefined` Scroll direction.
`singleSidedBounce`	`"both"`	`SingleSidedBounce \| undefined` Which edge(s) may bounce.
`startBounceTriggerDistance`	`0`	`number \| undefined` Overscroll distance (px) past the upper edge required to fire `scrollToBounces` with `{ direction: 'upper' }`.
`upperThreshold`	`0`	`number \| undefined` Distance (px) from the upper edge that fires `scrollToUpper`.

Emits

Event	Payload
`scrollToLower`	`[event: unknown]`
`scrollToUpper`	`[event: unknown]`
`scroll`	`[event: unknown]`
`scrollEnd`	`[event: unknown]`
`scrollToBounces`	`[info: ScrollToBouncesInfo]`

Platform notes

The custom bounce runs through main-thread (MTS) worklets; without enableBounces the component is a thin pass-through to native scrolling.

FeedList — virtualized lists with pull-to-refresh built on the scroll/gesture layer.
Swiper — paged horizontal scrolling.

Rating

Capture an integer score with a row of tappable icons.

Select

Choose one value from a list presented in a mobile sheet.