{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/show/scrolllist","result":{"data":{"current":{"frontmatter":{"title":"ScrollList 滚动列表","order":79,"brief":"滚动列表。","icon":"doc-scrolllist"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本使用","title":"基本使用"}]},{"url":"#api-参考","title":"API 参考","items":[{"url":"#scrolllist","title":"ScrollList"},{"url":"#scrollitem","title":"ScrollItem","items":[{"url":"#itemdata","title":"ItemData"}]}]},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]},{"url":"#设计变量","title":"设计变量"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"zh-CN\",\n  \"order\": 79,\n  \"category\": \"展示类\",\n  \"title\": \"ScrollList 滚动列表\",\n  \"icon\": \"doc-scrolllist\",\n  \"brief\": \"滚动列表。\"\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u4F55\\u5F15\\u5165\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"import\",\n    \"import\": true\n  }, \"import { ScrollList, ScrollItem } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\\u4F7F\\u7528\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6EDA\\u52A8\\u5217\\u8868\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A\\u7C7B\\u4F3C\\u4E8E iOS \\u64CD\\u4F5C\\u7CFB\\u7EDF\\u7684\\u6EDA\\u52A8\\u9009\\u62E9\\u6A21\\u5F0F\\uFF0C\\u540C\\u65F6\\u652F\\u6301\\u6EDA\\u52A8\\u81F3\\u6307\\u5B9A\\u7A97\\u53E3\\u4F4D\\u7F6E\\u9009\\u62E9\\u4E0E\\u70B9\\u51FB\\u9009\\u62E9\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useState } from 'react';\\nimport { ScrollList, ScrollItem, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [selectIndex1, setSelectIndex1] = useState(1);\\n    const [selectIndex2, setSelectIndex2] = useState(1);\\n    const [selectIndex3, setSelectIndex3] = useState(1);\\n\\n    const ampms = [\\n        {\\n            value: '\\u4E0A\\u5348',\\n        },\\n        {\\n            value: '\\u4E0B\\u5348',\\n        },\\n    ];\\n\\n    const hours = new Array(12).fill(0).map((itm, index) => {\\n        return {\\n            value: index + 1,\\n        };\\n    });\\n\\n    const minutes = new Array(60).fill(0).map((itm, index) => {\\n        return {\\n            value: index,\\n            disabled: Math.random() > 0.5 ? true : false,\\n        };\\n    });\\n\\n    const onSelectAP = (data) => {\\n        if (data.type === 1) {\\n            setSelectIndex1(data.index);\\n        }\\n    };\\n\\n    const onSelectHour = (data) => {\\n        console.log('You have choose the hour for: ', data.value);\\n        if (data.type === 2) {\\n            setSelectIndex2(data.index);\\n        }\\n    };\\n\\n    const onSelectMinute = (data) => {\\n        console.log('You have choose the minute for: ', data.value);\\n        if (data.type === 3) {\\n            setSelectIndex3(data.index);\\n        }\\n    };\\n\\n    const handleClose = () => {\\n        console.log('close');\\n    };\\n\\n    const renderFooter = () => {\\n        return (\\n            <Button size=\\\"small\\\" type=\\\"primary\\\" onClick={handleClose}>\\n                Ok\\n            </Button>\\n        );\\n    };\\n\\n    const scrollStyle = {\\n        border: 'unset',\\n        boxShadow: 'unset',\\n    };\\n    \\n    return (\\n        <ScrollList style={scrollStyle} header={'\\u65E0\\u9650\\u6EDA\\u52A8\\u5217\\u8868'} footer={renderFooter()}>\\n            <ScrollItem\\n                mode=\\\"wheel\\\"\\n                cycled={false}\\n                list={ampms}\\n                type={1}\\n                selectedIndex={selectIndex1}\\n                onSelect={onSelectAP}\\n            />\\n            <ScrollItem\\n                mode=\\\"wheel\\\"\\n                cycled={true}\\n                list={hours}\\n                type={2}\\n                selectedIndex={selectIndex2}\\n                onSelect={onSelectHour}\\n            />\\n            <ScrollItem\\n                mode=\\\"wheel\\\"\\n                cycled={true}\\n                list={minutes}\\n                type={3}\\n                selectedIndex={selectIndex3}\\n                onSelect={onSelectMinute}\\n            />\\n        </ScrollList>\\n    );\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"ScrollList\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"bodyHeight\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"body\\u9AD8\\u5EA6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string \", \"|\", \" number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6837\\u5F0F\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"''\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"footer\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5E95\\u90E8 addon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"''\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"header\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5934\\u90E8 addon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"''\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5185\\u8054\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{}\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"ScrollItem\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6837\\u5F0F\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"''\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"cycled\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u4E3A\\u65E0\\u9650\\u5FAA\\u73AF\\uFF0C\\u4EC5\\u5728 mode \\u4E3A \\\"wheel\\\" \\u65F6\\u751F\\u6548\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"list\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5217\\u8868\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#ItemData\"\n  }, \"ItemData\"), \"[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"[]\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"mode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6A21\\u5F0F\\u9009\\u62E9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"normal\\\" \", \"|\", \" \\\"wheel\\\"\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"wheel\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"motion\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5F00\\u542F\\u6EDA\\u52A8\\u52A8\\u753B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Motion\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onSelect\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9009\\u4E2D\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(data: \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#ItemData\"\n  }, \"ItemData\"), \") => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"NOOP\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"selectedIndex\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9009\\u4E2D\\u9879\\u7684\\u7D22\\u5F15\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5185\\u8054\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{}\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"transform\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BF9\\u9009\\u4E2D\\u9879\\u7684\\u53D8\\u6362\\uFF0C\\u8FD4\\u56DE\\u503C\\u4F1A\\u4F5C\\u4E3A\\u6587\\u6848\\u8FDB\\u884C\\u663E\\u793A\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(value: any, text: string) => string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"v => v\")))), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"ItemData\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"disabled\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BE5\\u9879\\u662F\\u5426\\u88AB\\u7981\\u6B62\\u9009\\u62E9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6BCF\\u4E00\\u9879\\u7684\\u6587\\u6848\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"transform\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BE5\\u9879\\u5904\\u4E8E\\u9009\\u4E2D\\u72B6\\u6001\\u65F6\\u7684\\u53D8\\u6362\\uFF0C\\u8FD4\\u56DE\\u503C\\u4F1A\\u4F5C\\u4E3A\\u6587\\u6848\\u8FDB\\u884C\\u663E\\u793A\\uFF0CScrollItem \\u7EC4\\u4EF6\\u5982\\u679C\\u540C\\u65F6\\u4F20\\u5165\\u4F1A\\u4F18\\u5148\\u9009\\u62E9 ItemData \\u4E2D\\u7684 transform \\u65B9\\u6CD5\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(value: any, text: string) => string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"v => v\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"value\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6BCF\\u4E00\\u9879\\u7684\\u503C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"any\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Accessibility\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"ARIA\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"ScrollItem\"), \" \\u652F\\u6301\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-label\"), \", \\u6307\\u5B9A\\u8BE5\\u5217\\u6807\\u7B7E\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"ScrollItem\"), \" \\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-disabled\"), \" \\u8868\\u793A\\u8BE5\\u9879\\u76EE\\u662F\\u5426\\u88AB\\u7981\\u7528\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"ScrollItem\"), \" \\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-selected\"), \" \\u8868\\u793A\\u8BE5\\u9879\\u76EE\\u662F\\u5426\\u88AB\\u9009\\u4E2D\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/show/scrolllist","next":{"fields":{"slug":"en-US/show/sidesheet"},"id":"5ce161ff-691e-5eac-8fc5-f137535f817b","frontmatter":{"title":"SideSheet","localeCode":"en-US","icon":"doc-sidesheet","showNew":null}},"previous":{"fields":{"slug":"en-US/show/scrolllist"},"id":"bc9ba55c-e171-545a-9a93-24399eb0cf45","frontmatter":{"title":"ScrollList","localeCode":"en-US","icon":"doc-scrolllist","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}