Ant-design-mobile: tabs的underline如何自定义宽度

[cuitianze]

What problem does this feature solve?

能够高效还原设计师的设计图

What does the proposed API look like?

same issue with https://github.com/ant-design/ant-design-mobile/issues/1050

[ant-design-bot]

It will be better to write your issue/comment in English, so more people can understand you.
And this means that more people can help you or benefit from your issue/comment.
See: https://github.com/ant-design/ant-design/issues/4897

[zhang740]

文档：https://mobile.ant.design/components/tabs-cn/#Tabs

简单自定义使用tabBarUnderlineStyle，复杂自定义替换整个TabBar，可以继承默认实现然后覆盖想修改的地方。

@cuitianze

[cuitianze]

@zhang740 谢谢，那我自定义TabBar吧。
不过感觉这不属于复杂的自定义，再写很多代码显得有些多余。
伸手党不该向开源社区提过多需求的，forgive me。
感谢AntDesign开源！

[zhang740]

@cuitianze tabBarUnderlineStyle这个API本身就是来实现简单需求的啊，tabBarUnderlineStyle 不能满足么？具体是什么场景？

[zhang740]

@cuitianze 看了下，如果你用了tabBarUnderlineStyle无法改变宽度，是因为tabBarUnderlineStyle优先级不够，调整了下，新发了 [email protected]。（安装rmc-tabs新版本，或者删了node_modules重装依赖）

[chenghaohao]

@zhang740

tabBarUnderlineStyle加个width 是这样的效果，下划线的left不会自适应居中呢

[zhang740]

@chenghaohao 升级到[email protected]
例子 https://react-component.github.io/m-tabs/examples/basic.html 最后一个
antd-mobile 中 renderTabBar 使用参照 https://mobile.ant.design/components/tabs-cn/#components-tabs-demo-sticky

[cuitianze]

@zhang740 Thanks。
既然上面提到了tabs和sticky，我想请问为什么sticky不能应用于tabBar？
比如将这个例子https://mobile.ant.design/components/tabs-cn/#components-tabs-demo-sticky，放置于TabBar.Item中。

可以帮忙看看么？

[zhang740]

@cuitianze 不明白什么意思。。。想要什么效果？请给个demo

[cuitianze]

@zhang740

红色这块区域希望能吸顶。

最下面一排菜单是TabBar。

[cuitianze]

@zhang740 就比如 https://mobile.ant.design/components/tabs-cn/#components-tabs-demo-sticky 这个demo，是单独一个页面的时候，可以做到吸顶效果，但放到TabBar里就出现Bug了，无法吸顶。

[zhang740]

@cuitianze 可以先设置TabBar.Item的style，transform: 'none'，下个版本修复。

---

upgrade to [email protected]

[cuitianze]

@zhang740 如果是这样的话，ListView理论上不是也应该无效么？
😭 我在ListView里应用确实无效，不知道官方例子放在Section里是如何有效的?

看了一下Demo里没有使用到下拉刷新，请问在有下拉刷新的ListView里怎么实现Sticky？

[cuitianze]

@zhang740 ListView 的 Refresh 经常拉下来不自动收起来

[zhang740]

@cuitianze 新开一个ListView 的issue吧

[wangdicoder]

tabBarUnderlineStyle attribute still doesn't work to set the width of the underline.

[spicyboiledfish]

@cuitianze @zhang740 我这边改了源码之后，已经实现了这种效果。等间距，且underline自适应宽度，左移的时候的偏移量也会根据当前位置及滑动到中间位置去精确计算。请看下面我的效果图：

源码：https://github.com/spicyboiledfish/rmc-custom-wr-tabs

[mingzizhennimafan]

可以试下： transform: scaleX(0.1);

[wvalen]

偷懒的下划线宽度控制方法：
tabBarUnderlineStyle={{ width: "10%", marginLeft: "20%" }}

[Gallery2000]

@wvalen antd4.0 tabBarUnderlineStyle已经删除了

[wvalen]

@wvalen antd4.0 tabBarUnderlineStyle已经删除了

我一脸懵逼，这里不是antd-mobile嘛，跟antd4.0有啥关系