关于 Material UI && react-swipeable-views 轮播图的一个坑

最新推荐文章于 2024-07-24 23:00:08 发布

weixin_45703889

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量1.5k

点赞数 1

分类专栏： react MUI 文章标签： reactjs 前端前端框架 css3 css

本文链接：https://blog.csdn.net/weixin_45703889/article/details/123599013

版权

react MUI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

关于 Material UI && react-swipeable-views 轮播图的一个坑

问题
将自己请求的图片放入轮播图后,轮播图会随机的闪烁,然后页面会自动回到顶部.

解决方案
MUI 的轮播图借助了react-swipeable-views 这个第三方库,这个库对移动端有专门的适配.

{images.map((step, index) => (
          <div key={step.label}>
            {Math.abs(activeStep - index) <= 2 ? (
              <Box
                component="img"
                sx={{
                  height: 255,
                  display: 'block',
                  maxWidth: 400,
                  overflow: 'hidden',
                  width: '100%',
                }}
                src={step.imgPath}
                alt={step.label}
              />
            ) : null}
          </div>
        ))}

改为:

{images.map((step, index) => (
          <div key={step.label}>
              <Box
                component="img"
                sx={{
                  height: 255,
                  display: 'block',
                  maxWidth: 400,
                  overflow: 'hidden',
                  width: '100%',
                }}
                src={step.imgPath}
                alt={step.label}
              />
          </div>
        ))}

因为我没有去看它的源码,也就不太清楚具体的逻辑,所以只能推断它在轮播图的时候返回了 null,导致轮播图闪了一下,出现问题.