3

我正在使用 React-slick 滑块来显示随机用户 API 给出的图像。我按照反应滑块的 npm 页面上给出的步骤安装了光滑的轮播并将两个 CSS 文件添加到组件中。

如果用户单击下一个箭头或将滑块向左拖动，我想向现有滑块添加更多图像，因此我使用afterChange回调来更新我的状态，以便使用此状态值作为第二个参数的 useEffect调用然后将以前的数据与新数据连接起来。

在这里，我注意到当用户单击下一步或将滑块向左拖动时，有时会出现失真。

https://stackblitz.com/edit/react-nlxodz有一个滑块和它下面的一个文本行，连续滑动滑块，你可以看到在几秒钟内，滑块下面的文本被推得更远，然后来了回到原来的地方。

如果滑块上有 flex 道具，文档建议使用以下 CSS。但是，我的代码没有弹性属性。

Flexbox support
If you have flex property on container div of slider, add below css

* {
  min-height: 0;
  min-width: 0;
}

这个问题是因为我将数据添加到滑块的方式还是 CSS 的问题？当用户快速滑动或滑动时，是否存在不显示失真的解决方案？

4

1 回答 1

-1

用Slider _div 

 <div style={{ backgroundColor: "green", height: "140px" }}>
          <Slider {...settings}>
            {rowData.map(i => (
              <div>
                <img src={i.picture.large} />
              </div>
            ))}
          </Slider>
        </div>
        <div>KEEP AN EYE ON THIS TEXT WHILE SCROLLING</div>
于 2020-01-22T11:37:53.897 回答