前端开发提速利器：用 Ant Design Mobile 2 分钟画完两页界面

2024-02-02 12:41:14

移动端开发的提速神器

昨天，我们完成了移动端页面的适配。今天，我们将引入 Ant Design Mobile 组件库，作为我们前端开发的基石，大幅提升开发效率。

Ant Design Mobile 是蚂蚁集团设计团队打造的组件库，凝聚了支付宝等众多业务实践的智慧结晶。它提供了丰富的移动端 UI 组件，涵盖了各种常见的交互和视觉元素，如按钮、列表、表单和导航栏。

引入 Ant Design Mobile

在你的项目中引入 Ant Design Mobile 非常简单。只需在你的 HTML 文件中添加以下代码：

<script src="https://unpkg.com/antd-mobile@2/dist/antd-mobile.min.js"></script>

然后，你就可以在你的代码中使用 Ant Design Mobile 组件了。

2 分钟画完两页界面

为了展示 Ant Design Mobile 的强大功能，我们将在 2 分钟内使用它来创建两个移动端页面。

页面 1：登录页面

import React from "react";
import { Button, InputItem } from "antd-mobile";

const LoginPage = () => {
  return (
    <div>
      <h1>登录</h1>
      <InputItem placeholder="请输入用户名" />
      <InputItem placeholder="请输入密码" />
      <Button type="primary">登录</Button>
    </div>
  );
};

export default LoginPage;

页面 2：列表页面

import React from "react";
import { List } from "antd-mobile";

const ListPage = () => {
  const data = [
    { title: "Item 1" },
    { title: "Item 2" },
    { title: "Item 3" },
  ];
  return (
    <div>
      <h1>列表</h1>
      <List>
        {data.map((item) => (
          <List.Item key={item.title}>{item.title}</List.Item>
        ))}
      </List>
    </div>
  );
};

export default ListPage;