是否可以在Material UI SWipeableDrawer中定义一个不通过关闭抽屉来响应滑动的区域

编程问答 2022-10-31

问题描述

我在SwipeableDrawer中有一个带有照片滑块的组件。并且在尝试滑动照片期间，抽屉关闭。抽屉中是否可以定义一个不会因关闭抽屉而对刷卡做出响应的区域？在文档中，我找到了“ SwipeAreaProps”属性，但是如何使用它尚不清楚。SwipeableDrawer layout

我的抽屉代码定义

      <SwipeableDrawer
    className={classes.drawerClass}
    anchor="left"
    classes={{
      paper: classes.drawerPaper,}}
    transitionDuration={200}
    open={detailDrawerOpen}
  >
    <DrawerBackButton onClick={onBack} />
    <DetailDrawerContext.Provider value={{ onPhotoSave }}>
      <ScrollBar>
        <DrawerContainer>
          <DetailDrawerHeader
            monument={monument}
            onMonumentPhotoClicked={onMonumentPhotoClicked}
          />
          <DetailDrawerContent monument={monument} />
        </DrawerContainer>
      </ScrollBar>
    </DetailDrawerContext.Provider>
    {monument ? (
      <React.Fragment>
        {photoDialogShow ? (
          <PhotoLightBox
            open={photoDialogopen}
            setopen={setPhotoDialogopen}
            monumentPhotos={monument.monumentPhotos}
            initIndex={selectedMonumentPhotoIndex}
          />
        ) : null}
      </React.Fragment>
    ) : null}
  </SwipeableDrawer>

DetailDrawerHeader 

import React,{ useState } from "react";
import { makeStyles } from "@material-ui/core";
import DrawerBackButton from "../../common/drawer-back-button/drawer-back-button";
import PhotoCarousel from "./photo-carousel/photo-carousel";

const useStyles = makeStyles((theme) => ({
  imagesContainer: {
    width: "100%",height: theme.detailDrawerHeaderHeight,flexShrink: 0
  },}));

export default function DetailDrawerHeader({monument,onMonumentPhotoClicked = p => p}) {
  const classes = useStyles();
  return (
    <div className={classes.imagesContainer}>
      <PhotoCarousel data={monument && monument.monumentPhotos} onMonumentPhotoClicked={onMonumentPhotoClicked}/>
    </div>
  );
}

PhotoCarousel视图

return (
    <div className={styles.container}>
      <SwipeableViews
        disableLazyLoading={false}
        index={currentIndex}
        animateTransitions={animateTransitions}
        onChangeIndex={onChangeIndexHandle}
      >
        {sortedPhotos.map((monumentPhoto,i) => (
          <img
            className={styles.img}
            onClick={() => onMonumentPhotoClicked(monumentPhoto)}
            src={monumentService.getPhotoLink(monumentPhoto.photoId,500)}
            key={i}
          />
        ))}
      </SwipeableViews>
      {currentIndex !== 0 ? (
        <CarouselButtonContainer attachTo="left">
          <IconButton onClick={onLeftButtonClick}>
            <ArrowBackIosIcon className={styles.arrowIcon} />
          </IconButton>
        </CarouselButtonContainer>
      ) : null}
      {currentIndex < sortedPhotos.length - 1 ? (
        <CarouselButtonContainer attachTo="right">
          <IconButton onClick={onRightButtonClick}>
            <ArrowForwardiosIcon className={styles.arrowIcon} />
          </IconButton>
        </CarouselButtonContainer>
      ) : null}
    </div>
  );

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

drawermaterial-uireactjsreactjsswipe