使用 antd-mobile 的 Tabs 组件,该组件已经针对移动端做了优化。
代码示例:
import { Tabs } from 'antd-mobile';
const tabs = [
{ title: '选项卡 1' },
{ title: '选项卡 2' },
{ title: '选项卡 3' },
];
function TabExample() {
const [activeTab, setActiveTab] = useState(0);
return (
setActiveTab(index)}
useOnPan={false}
>
选项卡 1 的内容
选项卡 2 的内容
选项卡 3 的内容
);
}
在上面的示例中,我们使用了 antd-mobile 的 Tabs 组件,并将 useOnPan
属性设置为 false
。这可以使选项卡在移动端使用触摸时可以正确响应。