Tabs无法使用Sticky标签包裹选项卡头

[and80506]

What problem does this feature solve?

需求场景：

   使用react-sticky实现tabs选项卡头置顶效果。由于目前的API选项卡头显示文字是配置在TabPane的属性中，导致无法使用Sticky标签包裹选项卡头。

需求用例：

   目前受限于API只能实现选显卡头和选项卡内容一起置顶的效果。

import { Tabs } from 'antd-mobile';
import { StickyContainer, Sticky } from 'react-sticky';
const TabPane = Tabs.TabPane;
<StickyContainer>
<Sticky>
    <Tabs defaultActiveKey="2">
      <TabPane tab="选项卡一" key="1">
        <div>
          选项卡一内容
        </div>
      </TabPane>
      <TabPane tab="选项卡二" key="2">
        <div>
          选项卡二内容
        </div>
      </TabPane>
      <TabPane tab="选项卡三" key="3">
        <div>
          选项卡三内容
        </div>
      </TabPane>
    </Tabs>
</Sticky>
</StickyContainer>

What does the proposed API look like?

Tabs.TabTitle

属性	说明	类型	默认值
key	对应 activeKey	String	无

import { Tabs } from 'antd-mobile';
import { StickyContainer, Sticky } from 'react-sticky';
const TabPane = Tabs.TabPane;
const TabTitle = Tabs.TabTitle;
<StickyContainer>
<Sticky>
    <Tabs defaultActiveKey="2">
        <TabTitle key="1">选项卡一</TabTitle>
        <TabTitle key="2">选项卡二</TabTitle>
        <TabTitle key="3">选项卡三</TabTitle>
    </Tabs>
</Sticky>
<Tabs>
      <TabPane key="1">
        <div>
          选项卡一内容
        </div>
      </TabPane>
      <TabPane key="2">
        <div>
          选项卡二内容
        </div>
      </TabPane>
      <TabPane key="3">
        <div>
          选项卡三内容
        </div>
      </TabPane>
</Tabs>
</StickyContainer>

[paranoidjk]

antd-mobile 的 Tab 都没有 Tab.TabTitle?

请写清楚你的版本，最好提供一个 codepen demo

[and80506]

我想讨论的是能否支持新的API-比如新增TabTitile，无法提供可运行的codepen demo。

[paranoidjk]

@and80506 先给出你使用有问题的demo，我们才好决定是否要新增API来解决这个问题。

ant-design/ant-design#5165 这个你可以看下

[and80506]

需求场景是实现tabs选项卡头页面滑动到底部时置顶。
demo就是前面贴出来的需求用例，这个demo只能实现tabs选项卡头和内容一起置顶的效果：

import { Tabs } from 'antd-mobile';
import { StickyContainer, Sticky } from 'react-sticky';
const TabPane = Tabs.TabPane;
<StickyContainer>
<Sticky>
    <Tabs defaultActiveKey="2">
      <TabPane tab="选项卡一" key="1">
        <div>
          选项卡一内容
        </div>
      </TabPane>
      <TabPane tab="选项卡二" key="2">
        <div>
          选项卡二内容
        </div>
      </TabPane>
      <TabPane tab="选项卡三" key="3">
        <div>
          选项卡三内容
        </div>
      </TabPane>
    </Tabs>
</Sticky>
</StickyContainer>

看了这个issues：Tabs的title如何实现置顶 结合API发现没有办法实现，猜想原因是tabs的API设计，试着改API来实现这个。

import { Tabs } from 'antd-mobile';
import { StickyContainer, Sticky } from 'react-sticky';
const TabPane = Tabs.TabPane;
const TabTitle = Tabs.TabTitle;
<StickyContainer>
<Sticky>
    <Tabs defaultActiveKey="2">
        <TabTitle key="1">选项卡一</TabTitle>
        <TabTitle key="2">选项卡二</TabTitle>
        <TabTitle key="3">选项卡三</TabTitle>
    </Tabs>
</Sticky>
<Tabs>
      <TabPane key="1">
        <div>
          选项卡一内容
        </div>
      </TabPane>
      <TabPane key="2">
        <div>
          选项卡二内容
        </div>
      </TabPane>
      <TabPane key="3">
        <div>
          选项卡三内容
        </div>
      </TabPane>
</Tabs>
</StickyContainer>

[warmhug]

这个除了 #346 外，也跟 #734 (comment) 这里的 TabBar 路由跳转问题 有些共性。
tabs 的设计可能需要更复杂、来更灵活适应各种情况。

比如 TabTitle 和 TabPane 没必要是一一对应关系， 应该以 TabTitle 为主，TabPane 为辅，没设置 TabPane 时、支持自动生成 pane 容器。这种容器类组件，可以类似 RN listview API 设计

<Tabs 
  dataSource={[{title: 'title', panel: 'main content'}, {title: 'title1', panel: 'main content1'}]} 
  renderTitleWrap={() => <Sticky></Sticky>} 
  renderTitle={t => <div>{t}</div>}
  renderPaneWrap={() => <div></div>}
  renderPane={p => <div>{p}</div>}
/>

[silentcloud]

赞同 @warmhug 说的这种方式，这样改造之后， segmentcontrol（无 panel）、tabbar 也可以公用底层；

另外我们的组件不一定都非得用 rc-xxx 来做底层，毕竟起初 rc 是以 pc 起始的，mobile 端要尽量做到简单，代码量少，这也是 2.0 的目标，包大小的问题

[and80506]

@warmhug 更加灵活的API设计比如renderTitleWrap也能很好满足此类需求，非常赞！

[is7and11]

@and80506 请问后来有找到解决的方法吗？ 我也有遇到相同的情境. 上网找了一阵子.没有找到.

[silentcloud]

@is7and11 这个要等到 2.0，重构 api 了

[is7and11]

@silentcloud 好的.謝謝

[paranoidjk]

@zhang740

评估下上面 @warmhug 提议的新 api 设计。如果这个 重构/重做，可以顺便把 rc-hammerjs 用 https://github.com/react-component/gesture 替代。#1565