swiper - 刷卡器反应返回第一张幻灯片
问题描述
我是 swiper.js 的新手,我正在使用 react 我有一个垂直滑动器我想创建两个按钮第一个按钮单击转到顶部,第二个转到底部,我尝试初始状态并设置他的值单击按钮但没有任何效果
这是我的代码
export const ContactFrom = ({
contactInfo,
setContactInfo,
setFormSubmited,
typeId,
slideNo,
setCurrentSlide,
}) => {
const [swiper, setSwiper] = useState(1);
const [initialIstate, setinitialIstate] = useState(3);
useEffect(() => {
setCurrentSlide(swiper);
}, [swiper]);
return (
<Container maxWidth={false} disableGutters>
<Swiper
direction={"vertical"}
slidesPerView={1}
spaceBetween={30}
mousewheel={true}
className="ContactForm"
speed={1500}
touchRatio={2}
onSlideChange={(e) => setSwiper(e.activeIndex + 1)}
initialSlide={initialIstate}
followFinger={false}
>
<SwiperSlide>
<Storage
contactInfo={contactInfo}
setContactInfo={setContactInfo}
typeId={typeId}
/>
</SwiperSlide>
<SwiperSlide>
<RequiredSize
contactInfo={contactInfo}
setContactInfo={setContactInfo}
/>
</SwiperSlide>
<SwiperSlide>
<PromotionOffer
contactInfo={contactInfo}
setContactInfo={setContactInfo}
/>
</SwiperSlide>
<SwiperSlide>
<Information
contactInfo={contactInfo}
setContactInfo={setContactInfo}
/>
</SwiperSlide>
<SwiperSlide>
<MoreInfo
contactInfo={contactInfo}
setContactInfo={setContactInfo}
setFormSubmited={setFormSubmited}
/>
</SwiperSlide>
</Swiper>
<button onClick={()=>setinitialIstate(3)}>go to top</button>
</Container>
);
解决方案
推荐阅读
- android - Flutter 原生崩溃
- ios - swiftui 对成员“navigationBarTitle”的模糊引用
- embedded - 如何将STM32控制器的CAN波特率设置为500K
- go - 接口方法实现可以在 Go 中“跳过”吗?
- ios - 如何限制for循环中的网络调用次数?
- reactjs - React,Graphql - 如何将变量传递给突变
- c++ - 工厂方法:赋值和strcpy_s的区别
- pandas - Pandas ValueError:只能比较标签相同的系列对象
- authentication - 使用用户 github 帐户验证他们的身份以登录并访问我们的网站
- c# - 解决从一个实体到另一个实体的转换问题?