nutui-react icon indicating copy to clipboard operation
nutui-react copied to clipboard

Calendar日历组件和Tabbar组件冲突,日历组件无法覆盖Tabbar,导致确定按钮无法显示。

Open HenryOoO opened this issue 1 year ago • 2 comments

NutUI React 包名

@nutui/nutui-react-taro

NutUI React 版本号

2.3.10

平台

weapp

重现链接

仅手机端可重现,无法提供在线实例

重现步骤


import RootLayout from '@components/RootLayout'
import SearchParams from '@components/SearchParams'
import { Calendar, Popup, Tabbar } from '@nutui/nutui-react-taro'
import { Button, ScrollView, View } from '@tarojs/components'
import { observer } from 'mobx-react'
import { useState } from 'react'

function Index() {
    const [visible, setVisible] = useState(false)
    return (
        <View>
            <ScrollView showScrollbar={false} enhanced scrollY style={{ height: 475 }}>
                <Button onClick={() => setVisible(true)}>Open </Button>
                <Calendar visible={visible} type='range' onClose={() => setVisible(false)} />
            </ScrollView>
            <Tabbar inactiveColor='#7d7e80' activeColor='#1989fa' safeArea fixed className=' global-tabbar '>
                <Tabbar.Item title='首页' />
                <Tabbar.Item title='发现' />
            </Tabbar>
        </View>
    )
}

export default observer(Index)

期望的结果是什么?

弹窗层级比tabbar高,且能正常显示日历的按钮

实际的结果是什么?

微信开发者工具正常显示,但在我的手机设备上(iphone15)任何弹窗(目前试了Calendar和Popup)均无法覆盖Tabbar image image

环境信息

👽 Taro v3.6.24

Taro CLI 3.6.24 environment info: System: OS: macOS 14.3.1 Shell: 5.9 - /bin/zsh Binaries: Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm npmPackages: @tarojs/cli: 3.6.23 => 3.6.23 @tarojs/components: 3.6.23 => 3.6.23 @tarojs/helper: 3.6.23 => 3.6.23 @tarojs/plugin-framework-react: 3.6.23 => 3.6.23 @tarojs/plugin-html: 3.6.23 => 3.6.23 @tarojs/plugin-platform-alipay: 3.6.23 => 3.6.23 @tarojs/plugin-platform-h5: 3.6.23 => 3.6.23 @tarojs/plugin-platform-jd: 3.6.23 => 3.6.23 @tarojs/plugin-platform-qq: 3.6.23 => 3.6.23 @tarojs/plugin-platform-swan: 3.6.23 => 3.6.23 @tarojs/plugin-platform-tt: 3.6.23 => 3.6.23 @tarojs/plugin-platform-weapp: 3.6.23 => 3.6.23 @tarojs/react: 3.6.23 => 3.6.23 @tarojs/runtime: 3.6.23 => 3.6.23 @tarojs/shared: 3.6.23 => 3.6.23 @tarojs/taro: 3.6.23 => 3.6.23 @tarojs/taro-loader: 3.6.23 => 3.6.23 @tarojs/webpack5-runner: 3.6.23 => 3.6.23 babel-preset-taro: 3.6.23 => 3.6.23 eslint-config-taro: 3.6.23 => 3.6.23 react: ^18.0.0 => 18.2.0

其他补充信息

No response

HenryOoO avatar Mar 06 '24 08:03 HenryOoO

+1,有解决方案嘛

mocha-opts avatar Jun 12 '25 09:06 mocha-opts

3.x 版本以下代码 没有复现,在微信下测试过。

<>
      <Cell
        title="选择单个日期"
        description={date ? `${date} ${dateWeek}` : '请选择'}
        onClick={openSwitch}
      />
      <Calendar
        visible={isVisible}
        defaultValue={date}
        onClose={closeSwitch}
        onConfirm={setChooseValue}
        onDayClick={select}
      />
      <Tabbar fixed style={{ zIndex: 1000 }}>
        <Tabbar.Item title="首页" />
        <Tabbar.Item title="分类" />
      </Tabbar>
    </>

xiaoyatong avatar Jul 01 '25 09:07 xiaoyatong