该函数必须使用滑块的特定索引 (id) 触发;它在放置滑块时触发,而不是在 onClick 时触发。PS我在API中没有看到任何内容......
import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper-bundle.css';
import './TabsSwiper.scss';
import { Navigation } from 'swiper/modules';
const navigatePanel = [
{ label: 'Исследования', id: '1' },
{ label: 'Дизайн', id: '2' },
{ label: 'Разработка', id: '3' },
{ label: 'Тестирование', id: '4' },
{ label: 'Аутстафф', id: '5' },
{ label: 'Поддержка', id: '6' },
];
type TabsSwiperPropsType = {
handleTabClick: (index: string) => void;
};
const TabsSwiper: React.FC<TabsSwiperPropsType> = ({ handleTabClick }) => {
return (
<Swiper
modules={[Navigation]}
navigation
loop
onSlideResetTransitionEnd={function () {
console.log('*** mySwiper.realIndex', Swiper);
}}
onSlideChange={() => console.log('slide change')}
>
{navigatePanel.map((item) => {
return (
<div key={item.id} className="swiperContainer">
<SwiperSlide>
<p
onClick={() => {
handleTabClick(item.id);
}}
>
{item.label}
</p>
</SwiperSlide>
</div>
);
})}
</Swiper>
);
};
export default TabsSwiper;