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

       最近两周在研究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', height: '150px', backgroundColor: