ScrollList

Demos

How to import

<script setup lang="ts">
    import { ScrollList, ScrollItem } from '@fibrous/semi-ui-vue';
</script>

Basic Usage

The scrolling list provides a scrolling selection mode similar to the iOS operating system, while supporting scrolling to the specified window location selection and click selection.

Bind the selected item with v-model:selectedIndex; there is no uncontrolled mode. header and footer are string props; use the slots of the same name for custom content.

<script setup lang="ts">
    import { ref } from 'vue';
    import { Button, ScrollItem, ScrollList, type ScrollItemSelectData } from '@fibrous/semi-ui-vue';

    const ampms = [{ value: '上午' }, { value: '下午' }];
    const hours = Array.from({ length: 12 }, (_, index) => ({ value: index + 1 }));
    const minutes = Array.from({ length: 60 }, (_, index) => ({ value: index, disabled: index % 3 === 0 }));

    const selectIndex1 = ref(1);
    const selectIndex2 = ref(1);
    const selectIndex3 = ref(1);

    const onSelectHour = (data: ScrollItemSelectData) => {
        console.log('You have choose the hour for: ', data.value);
    };

    const onSelectMinute = (data: ScrollItemSelectData) => {
        console.log('You have choose the minute for: ', data.value);
    };

    const handleClose = () => {
        console.log('close');
    };
</script>

<template>
    <ScrollList header="无限滚动列表" :style="{ border: 'unset', boxShadow: 'unset' }">
        <ScrollItem v-model:selectedIndex="selectIndex1" aria-label="上午或下午" :cycled="false" :list="ampms" mode="wheel" :type="1" />
        <ScrollItem v-model:selectedIndex="selectIndex2" aria-label="小时" cycled :list="hours" mode="wheel" :type="2" @select="onSelectHour" />
        <ScrollItem v-model:selectedIndex="selectIndex3" aria-label="分钟" cycled :list="minutes" mode="wheel" :type="3" @select="onSelectMinute" />
        <template #footer>
            <Button size="small" type="primary" @click="handleClose">Ok</Button>
        </template>
    </ScrollList>
</template>

API Reference

ScrollList

Props

Events

Slots

Exposes

class, style and native attributes such as aria-* land on the root element through attrs.

ScrollItem

Props

Events

Slots

Exposes

aria-label, aria-labelledby and aria-describedby land on the list (role="listbox"); class, style and other attributes land on the root element.

ItemData

Methods

Call these through a template ref of ScrollItem, for example to realign the selected item after the container is resized.

Accessibility

ARIA

• When aria-label or aria-labelledby is passed, the root element of ScrollList gets role="group"
• ScrollItem is a role="listbox" and supports aria-label, which indicates the label of the current column.
• ScrollItem uses aria-disabled to indicate whether the item is disabled
• ScrollItem uses aria-selected to indicate whether the item is selected
• The copies that fill the wheel of a cycled column carry aria-hidden="true", so screen readers only read the real options

Keyboard and Focus

• Each column is a listbox: focus it with Tab. Focus stays on the list and the selected item is exposed through aria-activedescendant; selection follows focus, and each selection fires the select callback
• ArrowUp selects the previous item and ArrowDown the next one, skipping disabled items; Home selects the first item and End the last one
• With cycled, the arrow keys wrap around at both ends in either mode; without it they stop at the ends
• Typing characters selects the item whose text starts with them; typing the same character repeatedly moves on to the next match

Design Tokens