Ken428965 2022-09-06 16:34 采纳率: 53.4%
浏览 38
已结题

react,在首页引入走马灯(轮播图)的问题

已写的代码如下:
轮播图代码:

img

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>
    );
};

首页的代码:

img

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标签里导入吗?

img

  • 写回答

1条回答 默认 最新

  • 崽崽的谷雨 2022-09-06 16:59
    关注

    先 引入 插件 比如 swiper 或者 其它 ui库自带的 。然后直接 使用就行 。

    直接在 homepage里 写就行

    http://ant-design-mobile.antgroup.com/zh/components/swiper

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题?

问题事件

  • 系统已结题 9月14日
  • 已采纳回答 9月6日
  • 创建了问题 9月6日

悬赏问题

  • ¥15 欧拉系统opt目录空间使用100%
  • ¥15 ul做导航栏格式不对怎么改?
  • ¥20 用户端如何上传图片到服务器和数据库里
  • ¥15 现在研究生在烦开题,看了一些文献,但不知道自己要做什么,求指导。
  • ¥30 vivado封装时总是显示缺少一个dcp文件
  • ¥100 pxe uefi启动 tinycore
  • ¥15 我pycharm运行jupyter时出现Jupyter server process exited with code 1,然后打开cmd显示如下
  • ¥15 可否使用carsim-simulink进行四轮独立转向汽车的联合仿真,实现四轮独立转向汽车原地旋转、斜向形式、横移等动作,如果可以的话在carsim中如何进行相应设置
  • ¥15 Caché 2016 在Java环境通过jdbc 执行sql报Parameter list mismatch错误,但是同样的sql使用连接工具可以查询出数据
  • ¥15 疾病的获得与年龄是否有关