已写的代码如下:
轮播图代码:
import React from 'react';
import { Space, Swiper } from 'antd-mobile';
import styles from './demo2.less';
const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac'];
const items = colors.map((color, index) => (<Swiper.Item key={index}>
<div className={styles.content} style={{ background: color }}>
{index + 1}
</div>
</Swiper.Item>));
export default () => {
return (
<Space direction='vertical' block>
<Swiper indicatorProps={{
color: 'white',
}} defaultIndex={1}>
{items}
</Swiper>
</Space>
);
};
首页的代码:
import React from 'react';
import { NavBar, TabBar } from 'antd-mobile';
import { Route, Routes, useLocation, useNavigate, MemoryRouter as Router, } from 'react-router-dom';
import { SmileOutline, MessageOutline, KeyOutline, UserOutline, } from 'antd-mobile-icons';
import styles from '../../pages/Home/demo2.less';
import Home from '../Home/index.js'
import '../Homepage/index'
const Bottom = () => {
const navigate = useNavigate();
const location = useLocation();
const { pathname } = location;
const setRouteActive = (value) => {
navigate(value);
};
const tabs = [
{
key: '/home',
title: '首页',
icon: <SmileOutline />,
},
{
key: '/home/houselist',
title: '找房',
icon: <KeyOutline />,
},
{
key: '/home/news',
title: '资讯',
icon: <MessageOutline />,
},
{
key: '/home/profile',
title: '我的',
icon: <UserOutline />,
},
];
return (<TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
{tabs.map(item => (<TabBar.Item key={item.key} icon={item.icon} title={item.title}/>))}
</TabBar>);
};
export default () => {
return (
// <Router initialEntries={['/homepage']}>{
<div className={styles.app}>
<div className={styles.top}>
<NavBar>配合路由使用</NavBar>
</div>
<div className={styles.body}>
<Routes>
<Route exact path='/' element={<Homepage />} />
<Route exact path='home' element={<Homepage />} />
<Route exact path='houselist' element={<Houselist />} />
<Route exact path='news' element={<News />} />
<Route exact path='profile' element={<Profile />} />
</Routes>
</div>
<div className={styles.bottom}>
<Bottom />
</div>
</div>
// }
// </Router>
);
};
function Homepage() {
return <div>这是首页</div>;
}
function Houselist() {
return <div>这是房源列表</div>;
}
function News() {
return <div>这是资讯</div>;
}
function Profile() {
return <div>这是我的资料</div>;
}
请问如何才能导入轮播图,让轮播图显示在首页里?请问是在下图所示的DIV标签里导入吗?