antd Mobile Tabs 垂直布局后台传入数据

最新推荐文章于 2025-05-16 13:35:26 发布

原创

最新推荐文章于 2025-05-16 13:35:26 发布 · 3.1k 阅读

3 ·

CC 4.0 BY-SA版权

在react项目中使用antd Mobile开发移动端应用时，遇到新闻列表模块的布局挑战。通过研究antd Mobile的Tabs组件，尤其是垂直布局和自定义属性，尝试实现类似头条的布局。难点在于异步加载数据并结合垂直布局的Tabs，解决内容区的渲染问题。最终通过在`componentDidMount()`中请求数据，存入state，并根据点击的tab从state获取对应内容。这种方法虽有一次性加载大量数据的弊端，但实现了功能，后续计划优化按需加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近两周在研究react 相关项目，react 相关的 UI插件中，antd 算是比较好的一种，所以这里就用antd mobile 开发一个移动端项目。具体react 知识点就不赘述了。这里主要讲遇到的 tabs 问题。

有一块是新闻列表模块。但是用长列表做完以后发现，这个布局效果不理想，为什么就不能像头条一样布局呢？

虽然只是运用Tabs 和布局相关的知识，但是实际操作并没有像API 里说的那样简单。

首先在 antd mobile 里面可以发现有基本用法、无动画、垂直、自定义等各种说明。所以这里要想实现上述效果，要将垂直布局和自定义属性结合。

 <Tabs
     tabs={this.state.tabs}
     tabBarPosition="left"
     tabDirection="vertical"
     initalPage={'t2'}
     renderTabBar={props => <Tabs.DefaultTabBar {...props} page={this.state.totalPage} />}>
          {this.renderContent}
 </Tabs>

这里tabs 是左侧栏的标题内容，最后一项renderTabBar 是右侧内容区渲染函数，page指定当前tab 数量。当没有最后一个渲染函数时，初次不会渲染内容。剩下两个 tabBarPosition="left" 、tabDirection="vertical" 就是定义左侧标题栏的位置。

下面到了最难的地方，renderContent 。

官网给出的示例是：

 renderContent = tab =>
    (<div style={
  
  { display: 'flex', alignItems: 'center', justifyContent: 'center'

最低0.47元/天解锁文章

200万优质内容无限畅学

antd Mobile Tabs 垂直布局 后台传入数据

antd Mobile Tabs 垂直布局后台传入数据