幻灯片
我们建议
Swiper.js
如果你需要一个现代的触摸滑块组件。我们的权力
IonSlides
组件，但我们现在建议开发者直接使用Swiper的React。
本指南将介绍如何在您的离子框架应用程序中设置Swiper for React。betway东盟体育app它还将检查您可能需要迁移的任何迁移信息
IonSlides
到官方的Swiper React集成。
本指南仅适用于Swiper v6。Swiper v7的指南即将发布!
开始
首先，在你的项目中安装Swiper依赖项:
npm
安装
swiper@6刷与风格
接下来，我们需要导入基本的Swiper样式。我们建议在使用Swiper的组件中导入样式。这确保了样式只在需要时加载:
进口
“偷窃者/ swiper-bundle.min.css”
；
betway东盟体育app离子框架也提供了一些默认的样式，以及在旧的CSS变量中使用的
IonSlides
．如果您想继续使用这些样式和CSS变量，请确保导入
betway东盟体育appionic-swiper.css
文件:
进口
“偷窃者/ swiper-bundle.min.css”
；
进口
“@betway东盟体育appionic / / css / ionic-swiper.css反应”
；预处理程序(可选)
对于使用SCSS或Less样式的开发人员，Swiper还提供了这些文件的导入。这里的不同之处在于，每个Swiper模块被分割成自己的文件，所以如果使用转换效果、缩放或分页等模块，可能需要导入多个样式表。
如果你想导入基本的Swiper样式和分页样式，你可以做以下操作:
进口
“swiper.scss”
；
进口
“偷窃者/组件/分页/ pagination.scss”
；
进口
“@betway东盟体育appionic / / css / ionic-swiper.css反应”
；Swiper有一个完整的样式表列表，你可以在这里导入: https://swiperjs.com/react#styles ．
使用组件
Swiper出口两个组件:
偷窃者
和
SwiperSlide
．的
偷窃者
分量相当于
IonSlides
,
SwiperSlide
相当于
IonSlide
．
这些组件是从
偷窃者/反应
：
进口
反应
从
“反应”
；
进口
｛
IonContent
，
IonPage
｝
从
“@betway东盟体育appionic /反应”
；
进口
｛
偷窃者
，
SwiperSlide
｝
从
“偷窃者/反应”
；
进口
“偷窃者/ swiper-bundle.min.css”
；
进口
“@betway东盟体育appionic / / css / ionic-swiper.css反应”
；
常量
首页
：
反应
．
足球俱乐部
＝
（
）
＝＞
｛
返回
（
<
IonPage
>
<
IonContent
>
<
偷窃者
>
<
SwiperSlide
>
幻灯片
1
<
/
SwiperSlide
>
<
SwiperSlide
>
幻灯片
2
<
/
SwiperSlide
>
<
SwiperSlide
>
幻灯片
3.
<
/
SwiperSlide
>
<
/
偷窃者
>
<
/
IonContent
>
<
/
IonPage
>
）
；
｝
；
出口
默认的
首页
；Ionibetway东盟体育appcSwiper模块
在离子框架中有一些边缘情况，Swiper可能无法正确计算滑块betway东盟体育app尺寸。因此，我们创造了
betway东盟体育appIonicSwiper
模块来解决其中一些问题。
要安装它，我们首先需要导入core Swiper库和IonicSwiper模块:betway东盟体育app
进口
SwiperCore
从
“偷窃者”
；
进口
｛
betway东盟体育appIonicSwiper
｝
从
“@betway东盟体育appionic /反应”
；然后我们可以安装模块:
进口
反应
从
“反应”
；
进口
｛
IonContent
，
IonPage
，
betway东盟体育appIonicSwiper
｝
从
“@betway东盟体育appionic /反应”
；
进口
SwiperCore
从
“偷窃者”
；
进口
“偷窃者/ swiper-bundle.min.css”
；
进口
“@betway东盟体育appionic / / css / ionic-swiper.css反应”
；
SwiperCore
．
使用
（
［
betway东盟体育appIonicSwiper
］
）
；
常量
首页
：
反应
．
足球俱乐部
＝
（
）
＝＞
｛
返回
（
<
IonPage
>
<
IonContent
>
<
偷窃者
>
<
SwiperSlide
>
幻灯片
1
<
/
SwiperSlide
>
<
SwiperSlide
>
幻灯片
2
<
/
SwiperSlide
>
<
SwiperSlide
>
幻灯片
3.
<
/
SwiperSlide
>
<
/
偷窃者
>
<
/
IonContent
>
<
/
IonPage
>
）
；
｝
；
出口
默认的
首页
；额外的模块
默认情况下，Swiper for React使用Swiper的核心版本，不导入任何额外的模块。要使用诸如Navigation或Pagination之类的模块，您需要首先导入它们。
IonSlides
自动包括分页、滚动条、自动播放、键盘和缩放模块。如果您使用了这些特性中的任何一个，请确保在您的应用程序中导入它们。
下面的例子展示了如何安装导航和分页插件:
进口
反应
从
“反应”
；
进口
｛
IonContent
，
IonPage
，
betway东盟体育appIonicSwiper
｝
从
“@betway东盟体育appionic /反应”
；
进口
SwiperCore
，
｛
导航
，
分页
｝
从
“偷窃者”
；
进口
｛
偷窃者
，
SwiperSlide
｝
从
“偷窃者/反应”
；
偷窃者
．
使用
（
［
betway东盟体育appIonicSwiper
，
导航
，
分页
］
）
；
进口
“偷窃者/ swiper-bundle.min.css”
；
进口
“@betway东盟体育appionic / / css / ionic-swiper.css反应”
；
常量
首页
：
反应
．
足球俱乐部
＝
（
）
＝＞
｛
返回
（
<
IonPage
>
<
IonContent
>
<
偷窃者分页
＝
｛
｛
可点击的
：
真正的
｝
｝
导航
>
<
SwiperSlide
>
幻灯片
1
<
/
SwiperSlide
>
<
SwiperSlide
>
幻灯片
2
<
/
SwiperSlide
>
<
SwiperSlide
>
幻灯片
3.
<
/
SwiperSlide
>
<
/
偷窃者
>
<
/
IonContent
>
<
/
IonPage
>
）
；
｝
；
出口
默认的
首页
；
:::注意导入
swiper-bundle.min.css
为所有模块导入样式。当使用SCSS或Less样式时，您将需要为每个模块导入样式。看到
https://swiperjs.com/react#styles
查看完整的样式表列表。：：：
属性
滑动器选项作为道具直接提供在
<偷窃者>
组件而不是通过
选项
对象
IonSlides
．
假设在一个应用中
IonSlides
我们有
slidesPerView
和
循环
选项设置:
<
IonSlides选项
＝
｛
｛
slidesPerView
：
3.
，
循环
：
真正的
｝
｝
>
<
IonSlide
>
幻灯片
1
<
/
IonSlide
>
<
IonSlide
>
幻灯片
2
<
/
IonSlide
>
<
IonSlide
>
幻灯片
3.
<
/
IonSlide
>
<
/
IonSlides
>
为了迁移，我们将这些选项移出
选项
对象上的
<偷窃者>
组件直接作为属性:
<
偷窃者slidesPerView
＝
｛
3.
｝
循环
＝
｛
真正的
｝
>
<
SwiperSlide
>
幻灯片
1
<
/
SwiperSlide
>
<
SwiperSlide
>
幻灯片
2
<
/
SwiperSlide
>
<
SwiperSlide
>
幻灯片
3.
<
/
SwiperSlide
>
<
/
偷窃者
>
下面是一个完整的属性更改列表
IonSlides
对偷窃者Rreact:
| 的名字 | 笔记 |
|---|---|
| 选项 |
控件上直接将每个选项设置为属性
<偷窃者>
组件。 |
| 模式 |
对于基于模式的不同样式，您可以使用
.ios .swiper-container
或
。海事.swiper-container |
| 寻呼机 |
使用
分页
财产。需要安装Pagination模块。 |
| 滚动条 |
你可以继续使用
滚动条
属性，请确保首先安装Scrollbar模块。 |
所有可用的属性在Swiper React可以在 https://swiperjs.com/react#swiper-props ．
事件
自
偷窃者
组件不是由离子框架提供的，事件名称将没有betway东盟体育app
onIonSlide
前缀。
假设在一个应用中
IonSlides
我们使用了
onIonSlideDidChange
事件:
<
IonSlides onIonSlideDidChange
＝
｛
（
）
＝＞
onSlideChange
（
）
｝
>
<
IonSlide
>
幻灯片
1
<
/
IonSlide
>
<
IonSlide
>
幻灯片
2
<
/
IonSlide
>
<
IonSlide
>
幻灯片
3.
<
/
IonSlide
>
<
/
IonSlides
>
要进行迁移，我们将事件的名称更改为
onSlideChange
：
<
偷窃者onSlideChange
＝
｛
（
）
＝＞
onSlideChange
（
）
｝
>
<
SwiperSlide
>
幻灯片
1
<
/
SwiperSlide
>
<
SwiperSlide
>
幻灯片
2
<
/
SwiperSlide
>
<
SwiperSlide
>
幻灯片
3.
<
/
SwiperSlide
>
<
/
偷窃者
>
下面是从开始时事件名称更改的完整列表
IonSlides
偷窃者反应:
| IonSlides事件 | 偷窃者事件 |
|---|---|
| onIonSlideWillChange | onSlideChangeTransitionStart |
| onIonSlideDidChange | onSlideChangeTransitionEnd |
| onIonSlideDoubleTap | onDoubleTap |
| onIonSlideDrag | onSliderMove |
| onIonSlideNextStart | onSlideNextTransitionStart |
| onIonSlideNextEnd | onSlideNextTransitionEnd |
| onIonSlidePrevStart | onSlidePrevTransitionStart |
| onIonSlidePrevEnd | onSlidePrevTransitionEnd |
| onIonSlideReachStart | onReachBeginning |
| onIonSlideReachEnd | onReachEnd |
| onIonSlideTap | onTap |
| onIonSlideTouchStart | onTouchStart |
| onIonSlideTouchEnd | onTouchEnd |
| onIonSlideTransitionStart | onTransitionStart |
| onIonSlideTransitionEnd | onTransitionEnd |
| onIonSlidesDidLoad | onInit |
Swiper React中的所有事件都可以在 https://swiperjs.com/react#swiper-events ．
方法
大多数方法已被删除，以便访问
偷窃者
直接的道具。
访问这些属性可能很棘手，因为您想访问Swiper实例本身的属性，而不是React组件。要做到这一点，我们建议获取
偷窃者
通过实例
onswipe
：
进口
反应
，
｛
useState
｝
从
“反应”
；
．..
常量
首页
：
反应
．
足球俱乐部
＝
（
）
＝＞
｛
常量
［
swiperInstance
，
setSwiperInstance
］
＝
useState
（
）
；
返回
（
．..
<
偷窃者onswipe
＝
｛
（
偷窃者
）
＝＞
setSwiperInstance
（
偷窃者
）
｝
>
．..
<
/
偷窃者
>
）
｝
；
出口
默认的
首页
；
从这里开始，如果您想访问Swiper实例上的属性，则可以访问该属性
swiperInstance
．例如，如果你想检查
isBeginning
财产，你可以做:
swiperInstance.isBeginning
．确保
swiperInstance
是首先定义的!
下面是一个完整的方法更改列表
IonSlides
偷窃者反应:
| 的名字 | 笔记 |
|---|---|
| getActiveIndex () |
使用
activeIndex
财产。 |
| getPreviousIndex () |
使用
previousIndex
财产。 |
| getSwiper () |
使用。获取对Swiper实例的引用
onswipe
．看到上面的例子。 |
| isBeginning () |
使用
isBeginning
财产。 |
| isEnd () |
使用
isEnd
财产。 |
| 长度() |
使用
幻灯片
财产。(即swiperRef.slides.length) |
| lockSwipeToNext () |
使用
allowSlidesNext
财产。 |
| lockSwipeToPrev () |
使用
allowSlidePrev
财产。 |
| lockSwipes () |
使用
allowSlideNext
，
allowSlidePrev
,
allowTouchMove
属性来代替。 |
| startAutoplay () |
使用
播放
财产。 |
| stopAutoplay () |
使用
播放
财产。 |
影响
如果你正在使用Cube或Fade效果，你可以像安装其他模块一样安装它们:
进口
反应
从
“反应”
；
进口
｛
IonContent
，
IonPage
，
betway东盟体育appIonicSwiper
｝
从
“@betway东盟体育appionic /反应”
；
进口
SwiperCore
，
｛
EffectFade
｝
从
“偷窃者”
；
进口
｛
偷窃者
，
SwiperSlide
｝
从
“偷窃者/反应”
；
偷窃者
．
使用
（
［
betway东盟体育appIonicSwiper
，
EffectFade
］
）
；
进口
“偷窃者/ swiper-bundle.min.css”
；
进口
“@betway东盟体育appionic / / css / ionic-swiper.css反应”
；
常量
首页
：
反应
．
足球俱乐部
＝
（
）
＝＞
｛
返回
（
<
IonPage
>
<
IonContent
>
<
偷窃者效应
＝
“消失”
>
<
SwiperSlide
>
幻灯片
1
<
/
SwiperSlide
>
<
SwiperSlide
>
幻灯片
2
<
/
SwiperSlide
>
<
SwiperSlide
>
幻灯片
3.
<
/
SwiperSlide
>
<
/
偷窃者
>
<
/
IonContent
>
<
/
IonPage
>
）
；
｝
；
出口
默认的
首页
；有关Swiper效果的更多信息，请参阅 https://swiperjs.com/react#effects ．
总结
现在你已经安装了Swiper，这里有一整套新的Swiper功能供你享受。我们建议从 偷窃者反应介绍 然后引用 Swiper API文档 ．
我在哪里提交问题?
在打开一个问题之前，请考虑创建一个帖子 偷窃者讨论板 或者是 betway东盟体育app离子论坛 看看你的问题能否被社区解决。
如果你在Swiper库中遇到问题，新的bug应该在Swiper repo上归档: https://github.com/nolimits4web/swiper/issues
如果你遇到了问题
betway东盟体育appIonicSwiper
模块，新的bug应该被归档到Ionic Framework repo上:betway东盟体育app
https://github.com/betway东盟体育appionic-team/ionic-framework/issues