semi-design/content/show/scrolllist/index.md

---

localeCode: zh-CN order: 55 category: 展示类 title: ScrollList 滚动列表 icon: doc-scrolllist

brief: 滚动列表。

代码演示

如何引入

import { ScrollList, ScrollItem } from '@douyinfe/semi-ui';

基本使用

滚动列表提供了一个类似于 iOS 操作系统的滚动选择模式，同时支持滚动至指定窗口位置选择与点击选择。

import React from 'react';
import { ScrollList, ScrollItem, Button } from '@douyinfe/semi-ui';

class ScrollListDemo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectIndex1: 1,
            selectIndex2: 1,
            selectIndex3: 1,
        };

        this.ampms = [
            {
                value: '上午',
            },
            {
                value: '下午',
            },
        ];

        this.hours = new Array(12).fill(0).map((itm, index) => {
            return {
                value: index + 1,
            };
        });

        this.minutes = new Array(60).fill(0).map((itm, index) => {
            return {
                value: index,
                disabled: Math.random() > 0.5 ? true : false,
            };
        });

        this.onSelectAP = this.onSelectAP.bind(this);
        this.onSelectHour = this.onSelectHour.bind(this);
        this.onSelectMinute = this.onSelectMinute.bind(this);
        this.handleClose = this.handleClose.bind(this);
        this.renderFooter = this.renderFooter.bind(this);
    }

    onSelectAP(data) {
        this.setState({
            ['selectIndex' + data.type]: data.index,
        });
    }

    onSelectHour(data) {
        console.log('You have choose the hour for: ', data.value);
        this.setState({
            ['selectIndex' + data.type]: data.index,
        });
    }

    onSelectMinute(data) {
        console.log('You have choose the minute for: ', data.value);
        this.setState({
            ['selectIndex' + data.type]: data.index,
        });
    }

    handleClose() {
        console.log('close');
    }

    renderFooter() {
        return (
            <Button size="small" type="primary" onClick={this.handleClose}>
                Ok
            </Button>
        );
    }

    render() {
        let list = this.list;
        const scrollStyle = {
            border: 'unset',
            boxShadow: 'unset',
        };
        return (
            <ScrollList style={scrollStyle} header={'无限滚动列表'} footer={this.renderFooter()}>
                <ScrollItem
                    mode="wheel"
                    cycled={false}
                    list={this.ampms}
                    type={1}
                    selectedIndex={this.state.selectIndex1}
                    onSelect={this.onSelectAP}
                />
                <ScrollItem
                    mode="wheel"
                    cycled={true}
                    list={this.hours}
                    type={2}
                    selectedIndex={this.state.selectIndex2}
                    onSelect={this.onSelectHour}
                />
                <ScrollItem
                    mode="wheel"
                    cycled={true}
                    list={this.minutes}
                    type={3}
                    selectedIndex={this.state.selectIndex3}
                    onSelect={this.onSelectMinute}
                />
            </ScrollList>
        );
    }
}

API 参考

ScrollList

属性	说明	类型	默认值
bodyHeight	body高度	string | number
className	样式类名	string	''
footer	底部 addon	ReactNode	''
header	头部 addon	ReactNode	''
style	内联样式	CSSProperties	{}

ScrollItem

属性	说明	类型	默认值
className	样式类名	string	''
cycled	是否为无限循环，仅在 mode 为 "wheel" 时生效	boolean	false
list	列表内容	ItemData[]	[]
motion	是否开启滚动动画	Motion	true
onSelect	选中回调	(data: ItemData) => void	NOOP
selectIndex	选中项的索引	number	0
style	内联样式	CSSProperties	{}
transform	对选中项的变换，返回值会作为文案进行显示	(value: any, text: string) => string	v => v

ItemData

属性	说明	类型	默认值
disabled	该项是否被禁止选择	boolean
text	每一项的文案	string
transform	该项处于选中状态时的变换，返回值会作为文案进行显示，ScrollItem 组件如果同时传入会优先选择 ItemData 中的 transform 方法	(value: any, text: string) => string	v => v
value	每一项的值	any

设计变量