jdf2e / nutui-react

京东风格的移动端 React 组件库 、支持多端小程序(A React UI Toolkit for Mobile Web)
https://nutui.jd.com/react/
823 stars 245 forks source link

在 tabs组件中使用 DatePicker,会导致DatePicker显示异常 #2405

Open zqianling opened 2 weeks ago

zqianling commented 2 weeks ago

NutUI React 包名

@nutui/nutui-react-taro

NutUI React 版本号

2.6.11

平台

alipay

重现链接

暂无

重现步骤

<Tabs value={tab1value} onChange={(value) => { setTab1value(value) }}

期望的结果是什么?

时间选择抽屉不被覆盖

实际的结果是什么?

时间抽屉被覆盖,展示异常

环境信息

No response

其他补充信息

No response

xiaoyatong commented 2 weeks ago

能帮忙来一个图么,另外只有在alipay下有这个问题么~帮忙确认。

Ahui4518 commented 2 weeks ago

我也出现了这种情况,在TabPane下面的组件只要有涉及到fixed布局的,位置都会错乱

zqianling commented 2 weeks ago

image 点击时间的时候抽屉已经展开的状态,但是,没有显示出来。如果,不用Tabs.TabPane包裹,用三元表达式判断当前展示内容,就完好展示出来。 image

ilk-1 commented 2 weeks ago

我在nutui-vue中提了pr,因为它的tab是通过transform进行设置的,而当fixed的祖先存在transform时,他就不再以视口为锚点,而是以这个transform的元素进行锚点,因此会出现某些奇怪的bug https://github.com/jdf2e/nutui/pull/3130 vue复现仓库:https://stackblitz.com/edit/vitejs-vite-sty4eq

ilk-1 commented 2 weeks ago

这是使用react复现的地址,和nutui的一模一样

截屏2024-07-07 11 50 34
ilk-1 commented 2 weeks ago

给nut-tabpane增加一个transform: translate(0)就可以解决

截屏2024-07-07 11 51 52
zqianling commented 2 weeks ago

我试了你的方案,貌似多个tab的时候,在钉钉小程序下还是存在问题

ilk-1 commented 1 week ago

嘶,那就不清楚了,小程序调试太麻烦了

zqianling commented 1 week ago

因为他的tabs使用的 transform: translate3d(-100%, 0, 0); 导致的,pop组件不是跟着tab.item内容走的,它是始终在起点, transform: translate3d(0, 0, 0); ,所以,切换tab的时候,在该tab下打开DatePicker,其实是打开了,只不过在transform: translate3d(0, 0, 0)的位置,不是在该tab下比如translate3d(-200%, 0, 0)位置,所以,看不到