轮播懒加载图片
效果
()=>{SwiperCore.use([Autoplay, Keyboard, Lazy, Pagination, Navigation]);return <SwiperslidesPerView={1}autoplaykeyboardlooplazypreloadImages><SwiperSlide><img data-src="http://up.iosdesk.com/pic/5d/6e/ac/5d6eacd528a758336f7c9518654aec5f.jpg" className='swiper-lazy' /><div className="swiper-lazy-preloader"></div></SwiperSlide><SwiperSlide><img data-src="http://up.iosdesk.com/pic/f2/9e/22/f29e227b64e6b96f5d5248eec606dff0.jpg" className='swiper-lazy' /><div className="swiper-lazy-preloader"></div></SwiperSlide><SwiperSlide><img data-src="http://5b0988e595225.cdn.sohucs.com/images/20171201/bf69d781d16f4da6bc3d5aa9941c7cd1.jpeg" className='swiper-lazy' /><div className="swiper-lazy-preloader"></div></SwiperSlide></Swiper>;}
示例代码
import { GetStaticProps, NextPage, PageConfig } from 'next'; import Head from 'next/head'; // Import Swiper React components import { Swiper, SwiperSlide } from 'swiper/react'; import SwiperCore, { Autoplay, Keyboard, Lazy } from 'swiper/core'; // Import Swiper styles import 'swiper/swiper.min.css'; // or import 'swiper/swiper-bundle.min.css'; interface IProps { } /** * 引用轮播图示例页面 */ const page: NextPage<IProps> = () => { return ( <> <Head> <title>示例页面</title> </Head> <C001></C001> </> ); }; export const config: PageConfig = { amp: false }; export default page; export const getStaticProps: GetStaticProps<IProps> = async () => { return Promise.resolve({ props: {} }); }; function C001() { return <> <Swiper slidesPerView={1} autoplay navigation pagination={{ clickable: true, }} keyboard loop lazy preloadImages > {data.map((it, key) => { return <SwiperSlide key={key}> <img data-src={it.adress} className='swiper-lazy' /> <div className="swiper-lazy-preloader"></div> </SwiperSlide>; })} </Swiper> </>; }