租房App项目实战：首页模块详细攻略

2023-06-02 11:57:56

React 项目实战：探索首页模块

一、首页路由配置

搭建 React 应用的第一步是配置路由，这决定了当用户访问不同 URL 时，应用程序将呈现哪些组件。在我们的首页模块中，我们将使用 HashRouter 和 Route 组件：

// App.js
import Home from './pages/home/index.js';

const App = () => {
  return (
    <HashRouter>
      <Switch>
        <Route exact path="/" component={Home} />
      </Switch>
    </HashRouter>
  );
};

export default App;

然后，在我们的首页组件（home/index.js）中，我们添加了包含轮播图的代码：

// home/index.js
import React, { Component } from 'react';
import Carousel from 'antd-mobile/lib/carousel';

class Home extends Component {
  render() {
    return (
      <div>
        <Carousel>
          <img src="https://zos.alipayobjects.com/rmsportal/AiyWuByWklrrUDlFignR.png" alt="" />
          <img src="https://zos.alipayobjects.com/rmsportal/TekJlZRVCjLFexlOCuWn.png" alt="" />
          <img src="https://zos.alipayobjects.com/rmsportal/EkXWVvAaFBNrLEkRuecQ.png" alt="" />
        </Carousel>
      </div>
    );
  }
}

export default Home;

二、轮播图

2.1 轮播图效果图

[图片]

2.2 轮播图实现步骤

从 antd-mobile 组件库获取 Carousel 组件：
从 antd-mobile 组件库文档中找到 Carousel 组件，获取其源代码。
拷贝核心代码到组件中：
将 Carousel 组件的源代码拷贝到我们的首页组件（home/index.js）中。
调整代码以使其能够正常运行：
调整导入语句和代码结构，确保 Carousel 组件能够正确运行。

2.3 轮播图代码

// home/index.js
import React, { Component } from 'react';
import Carousel from 'antd-mobile/lib/carousel';

class Home extends Component {
  render() {
    return (
      <div>
        <Carousel autoplay infinite>
          <img src="https://zos.alipayobjects.com/rmsportal/AiyWuByWklrrUDlFignR.png" alt="" />
          <img src="https://zos.alipayobjects.com/rmsportal/TekJlZRVCjLFexlOCuWn.png" alt="" />
          <img src="https://zos.alipayobjects.com/rmsportal/EkXWVvAaFBNrLEkRuecQ.png" alt="" />
        </Carousel>
      </div>
    );
  }
}

export default Home;

2.4 轮播图代码重构

为了进一步优化轮播图，我们可以添加更多的功能：

// home/index.js
import React, { Component } from 'react';
import Carousel from 'antd-mobile/lib/carousel';

class Home extends Component {
  render() {
    return (
      <div>
        <Carousel autoplay infinite beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}>
          <img src="https://zos.alipayobjects.com/rmsportal/AiyWuByWklrrUDlFignR.png" alt="" />
          <img src="https://zos.alipayobjects.com/rmsportal/TekJlZRVCjLFexlOCuWn.png" alt="" />
          <img src="https://zos.alipayobjects.com/rmsportal/EkXWVvAaFBNrLEkRuecQ.png" alt="" />
        </Carousel>
      </div>
    );
  }
}

export default Home;