Calendar日历组件和Tabbar组件冲突,日历组件无法覆盖Tabbar,导致确定按钮无法显示。
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
环境信息
👽 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
+1,有解决方案嘛
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>
</>