我正在使用 Material UI 中的
SwipeableDrawer
尝试创建一个可滑动的底部工作表。 当抽屉关闭时,抽屉出血设置为85px,以创建抽屉永远无法关闭的效果。 当抽屉“关闭”或最小化时,用户可以看到输入并尝试进行输入,以便用户可以与组件交互。 问题是,可滑动区域覆盖了组件以捕获和拖动操作。 有什么方法可以让抽屉出血组件允许用户交互并仍然保留拖动事件,以便用户可以将抽屉拖动打开?
抽屉代码:
const drawerBleeding = 85;
<SwipeableDrawer
container={portal}
className={classNames.join(' ')}
anchor="bottom"
id={id}
open={isOpen}
onClose={onClose ?? (() => void (0))}
onOpen={onOpen}
SwipeAreaProps={{ onClick: () => {}, style: {zIndex: 1100}, id: `${id}-swipe-area` }}
swipeAreaWidth={drawerBleeding}
disableSwipeToOpen={false}
onTransitionEnd={onTransitionEnd}
ModalProps={{ keepMounted: true }}>
<StyledBox onClick={onOpen} sx={{
position: 'absolute',
top: -bleeding,
borderTopLeftRadius: 8,
borderTopRightRadius: 8,
visibility: 'visible',
boxShadow: "0px -8px 8px -8px rgba(0, 0, 0, 0.35)",
height: `${drawerBleeding}px`,
right: 0,
left: 0,
pointerEvents: "auto"
}}>
<Puller />
{headerComponent}
</StyledBox>
<div style={{ height: '100%', borderRadius: "inherit" }}>{children}</div>
</SwipeableDrawer>
这是抽屉的图片:
输入框、汉堡包和头像的顶部都有透明的可滑动区域,用户无法与它们交互。
我尝试查看如果更改抽屉出血组件的 z 索引,拖动事件是否会传播到拖动区域,但这似乎不起作用。
下面是页面上呈现抽屉和滑动区域的位置:
如果我将可滑动区域放在出血组件后面,我就会失去滑动功能。
由于 [电子邮件受保护] 现在
allowSwipeInChildren
组件上有一个 SwipeableDrawer
字段,只需将其设置为 true
,它就会像您期望的那样工作。还可以传递函数。您可以在这里查看有关它的文档:https://mui.com/material-ui/api/swipeable-drawer/
我希望有帮助:)
如果您无法使用
allowSwipeInChildren
属性,您可以通过利用 children
中的 SwipeAreaProps
来实现类似的功能。这使您可以完全控制滑动区域每个部分内的交互处理。例如,下面的代码定义了两个单独的内联元素来捕获 onClick
事件,允许您单独管理每个元素的逻辑。这种方法根据 address
状态创建具有不同行为的单独交互区域。:
SwipeAreaProps={{
sx: {
width: !isOpen && address ? `calc(100% - 52px)` : '100%',
height: !isOpen && address ? '100px' : '40px !important',
bottom: !isOpen && address ? '0' : '72px'
},
children: (
<>
{address && (
<span
style={{
display: 'block',
width: '52px',
height: '52px',
marginRight: '-52px',
backgroundColor: 'transparent',
position: 'absolute',
top: 0,
right: 0
}}
onClick={(event) => {
event.stopPropagation();
event.preventDefault();
setAddress(null);
}}
/>
)}
{!address && (
<span
style={{
display: 'block',
width: 'calc(100% + 52px)',
height: '72px',
marginBottom: '-72px',
backgroundColor: 'transparent',
position: 'absolute',
bottom: 0
}}
onClick={(event) => {
event.stopPropagation();
event.preventDefault();
toggle('show');
setActionSheetState(ActionSheetStates.SEARCH);
}}
/>
)}
</>
)
}}