各个tab的问题

import React, { Component } from 'react'
import { Tabs, WhiteSpace, Badge } from 'antd-mobile';

import C1 from './c1/index'

import '@alifd/next/dist/next.css';

import { Tab } from '@alifd/next';


import 'antd/dist/antd.css';


const tabs = [
{ title: <Badge text={'3'}>First Tab</Badge> },
{ title: <Badge text={'今日(20)'}>Second Tab</Badge> },
{ title: <Badge dot>Third Tab</Badge> },
];

const tabs2 = [
{ title: 'First Tab', sub: '1' },
{ title: 'Second Tab', sub: '2' },
{ title: 'Third Tab', sub: '3' },
];

import antd from 'antd';



export default class index extends Component {

render() {
return (
<div>
<Tabs tabs={tabs}
usePaged={false}
initialPage={1}
onChange={(tab, index) => { console.log('onChange', index, tab); }}
onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
<C1 dataSource={1} />
</div>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
<C1 dataSource={2} />
</div>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
<C1 dataSource={3} />
</div>
</Tabs>


<WhiteSpace />
<Tab>
<Tab.Item title="Home" key="1">
<C1 dataSource={4} />
</Tab.Item>
<Tab.Item title="Documentation" key="2">
<C1 dataSource={5} />
</Tab.Item>
<Tab.Item title="Help" key="3">
<C1 dataSource={6} />
</Tab.Item>
</Tab>


<antd.Tabs defaultActiveKey="1" >
<antd.Tabs.TabPane tab="Tab 1" key="1">
<C1 dataSource={7} />
</antd.Tabs.TabPane>
<antd.Tabs.TabPane tab="Tab 2" key="2">
<C1 dataSource={8} />
</antd.Tabs.TabPane>
<antd.Tabs.TabPane tab="Tab 3" key="3">
<C1 dataSource={9} />
</antd.Tabs.TabPane>
</antd.Tabs>
</div>
)
}
}

posted on   漫思  阅读(48)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
历史上的今天:
2019-03-14 数组的一些运算操作
2019-03-14 underscore用法大全
2017-03-14 EXT3.3.1在IE9 IE10click事件 失效怎么解决
2017-03-14 npm 无法安装 ionic 解决办法

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示