最近再用swiper,当有超过20个SwiperItem就会出现卡顿。
查看了各种资料 比如 https://developers.weixin.qq.com/community/develop/doc/000068ff25ccf0bae4e76eab156c04
这个方案不错,但是切换的时候会出现一个突然的跳跃,因为swiper的current会变。
经过我自己很多尝试,发现一个完美解决方案。
核心思想就是把没有显示出来的dom元素尽量简化 比如用空 <SwiperItem/> 代替
const ITEM_LIMIMT = 3;
<Swiper
current ={currentIndex}
onChange={onChangeSwiper}
displayMultipleItems={1}
duration={300}
>
{items.map((item: any, index: number) =>
currentIndex < index + ITEM_LIMIMT && currentIndex > index - ITEM_LIMIMT ? (
<SwiperItem key={index}>
<ComplexComponent item={item}/>
</SwiperItem>
) : (
/* 没有显示出来的元素用空SwiperItem 代替*/
<SwiperItem key={index} />
),
)}
</Swiper>
奇怪,数据绑定不都是两层花括号吗? {{...}}
大佬,有代码片段吗
确实快了很多,给作者加鸡腿
我的解决办法 https://developers.weixin.qq.com/community/develop/article/doc/000e665d0bcc78861d8a7dcef5b413 大家可以一起交流 希望有更好的办法