@cainiaofe/cn-ui-m
Version:
40 lines (39 loc) • 2 kB
JavaScript
import * as React from 'react';
import { CnDemoPage, CnSlider, CnSliderItem, CnTab, CnDemoBlock, } from "../../..";
var tabItems = [
{ key: 'fruits', title: '水果' },
{ key: 'vegetables', title: '蔬菜' },
{ key: 'animals', title: '动物' },
];
var contentStyle = {
height: '120px',
color: '#999',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
fontSize: '24px',
userSelect: 'none',
};
export var 手势滑动 = function () {
var swiperRef = React.useRef(null);
var _a = React.useState(1), activeIndex = _a[0], setActiveIndex = _a[1];
return (React.createElement(CnDemoPage, { title: "\u624B\u52BF\u6ED1\u52A8" },
React.createElement(CnDemoBlock, { title: "\u624B\u52BF\u6ED1\u52A8" },
React.createElement(CnTab, { activeKey: tabItems[activeIndex].key, onChange: function (key) {
var _a;
var index = tabItems.findIndex(function (item) { return item.key === key; });
setActiveIndex(index);
(_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.swipeTo(index);
}, dataSource: tabItems }),
React.createElement(CnSlider, { direction: "horizontal", loop: true, indicator: function () { return null; }, ref: swiperRef, defaultIndex: activeIndex, onIndexChange: function (index) {
setActiveIndex(index);
} },
React.createElement(CnSliderItem, null,
React.createElement("div", { style: contentStyle }, "\u83E0\u841D")),
React.createElement(CnSliderItem, null,
React.createElement("div", { style: contentStyle }, "\u897F\u7EA2\u67FF")),
React.createElement(CnSliderItem, null,
React.createElement("div", { style: contentStyle }, "\u8682\u8681"))))));
};
手势滑动.desc = '配合 CnSlider 实现手势滑动';
export default { title: 'demo/CnTab' };