Ant Design Mobile

  • 官网：https://mobile.ant.design/index-cn

    1. 实践项目相关问题

    1.1. Tabs 组件设置标签的宽度

    需求：在使用 Ant Design Mobile 框架的 Tabs 组件时，标签的宽度默认是占满整个Tabs组件，现在需要自定义标签的宽度，不会出现只有一个标签的时候，整个标签都占满全部空间
    伪代码实现 ``` import { Tabs, WhiteSpace } from “antd-mobile”

function renderTabBar(props) { // 此处可以根据需求，进行业务逻辑动态设置宽度 const HEIGHT_MAP = { 1: “12.5%”, 2: “25%”, 3: “37.5%”, 4: “50%”, 5: “62.5%”, 6: “75%”, 7: “87.5%”, 8: “100%” }

let height = “100%” const length = tabs.length if (length > 0 && length < 8) { height = HEIGHT_MAP[length] }

return (

) } const tabs = [ { title: “First Tab” }, { title: “Second Tab” }, { title: “Third Tab” } ]

const TabExample = () => (

Content of first tab
Content of second tab
Content of third tab
)

```

  • 相关的参考资料：