如何解决加速刷卡
我遇到了 Swiper 速度慢的问题。我看到问题在于我创建幻灯片的功能需要很长时间才能处理我拥有的大量幻灯片。我希望有一种方法可以为 Swiper 提供一个接受索引并返回幻灯片的函数,这样即使只有 3 个可见,我也不必创建所有幻灯片。但我找不到这样的东西。这是我当前的代码:
import SwiperCore,{ Virtual } from "swiper";
import { Swiper,SwiperSlide } from "swiper/react";
import React,{ useState } from "react";
import "swiper/swiper.scss";
SwiperCore.use([Virtual]);
export default () => {
const [show,setShow] = useState(false);
const slides = Array.from({ length: 50000 }).map(
(el,index) => `Slide ${index}`
);
return (
<>
<input type="button" onClick={() => setShow(!show)} />
{show && (
<Swiper spaceBetween={50} slidesPerView={3} virtual>
{slides.map((slideContent,index) => (
<SwiperSlide key={slideContent} virtualIndex={index}>
Current slide is {index}
</SwiperSlide>
))}
</Swiper>
)}
</>
);
};
我已经将 swiper 虚拟化了,但是 map
函数使创建速度减慢了这么多。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。