幻灯片
我们推荐
Swiper.js
如果您需要现代的触摸滑块组件。它为我们的动力提供动力
离子滑动
组件，但我们现在建议开发人员使用swiper直接进行反应。
本指南将介绍如何在您的离子框架应用程序中设置React的Swiper。betway东盟体育app它还将介绍您可能需要从中移动的任何迁移信息
离子滑动
向官方的swiper反应集成。
本指南仅适用于swiper v6。Swiper V7的指南即将推出！
入门
首先，请在项目中安装swiper依赖性：
NPM
安装
Swiper@6用风格滑动
接下来，我们需要导入基本的铲子样式。我们建议在使用刀刀的组件中导入样式。这样可以确保仅在需要时加载样式：
进口
'swiper/swiper-bundle.min.css'
;
betway东盟体育app离子框架还提供了一些默认样式以及旧内部使用的CSS变量
离子滑动
。如果您想继续使用这些样式和CSS变量，请确保导入
betway东盟体育app离子-swiper.css
文件：
进口
'swiper/swiper-bundle.min.css'
;
进口
'@betway东盟体育appionic/react/css/ionic-swiper.css'
;预处理器（可选）
对于使用SCSS或更少样式的开发人员，Swiper还为这些文件提供导入。这里的区别在于，每个刷刀模块都被分解为自己的文件中，因此，如果您使用的模块，例如过渡效果，缩放或分页，则可能必须导入多个样式表。
如果您想导入基本的铲子样式和分页样式，则可以执行以下操作：
进口
'Swiper.scss'
;
进口
'swiper/组件/分页/分页.scss'
;
进口
'@betway东盟体育appionic/react/css/ionic-swiper.css'
;Swiper拥有可以在此处导入的样式表的完整列表： https://swiperjs.com/reeact#styles 。
使用组件
Swiper导出两个组件：
swiper
和
swiperslide
。这
swiper
组件等效于
离子滑动
， 和
swiperslide
等效于
离子滑
。
这些组件是从中导入的
Swiper/React
：
进口
反应
从
“反应”
;
进口
{
离子体
，，，，
离子页
}
从
'@betway东盟体育appionic/react'
;
进口
{
swiper
，，，，
swiperslide
}
从
'swiper/react'
;
进口
'swiper/swiper-bundle.min.css'
;
进口
'@betway东盟体育appionic/react/css/ionic-swiper.css'
;
const
家
：
反应
。
FC
=
（（
）
=>
{
返回
（（
<
离子页
>
<
离子体
>
<
swiper
>
<
swiperslide
>
滑动
1
<
/
swiperslide
>
<
swiperslide
>
滑动
2
<
/
swiperslide
>
<
swiperslide
>
滑动
3
<
/
swiperslide
>
<
/
swiper
>
<
/
离子体
>
<
/
离子页
>
）
;
}
;
出口
默认
家
;Ionibetway东盟体育appcswiper模块
离子框架中有几个边缘情况，其中铲子可能无法正确计算滑块尺寸。betway东盟体育app结果，我们创建了
betway东盟体育app离子湿管
解决其中一些问题的模块。
要安装它，我们首先需要导入Core Swiper库和IonicsWiper模块：betway东盟体育app
进口
Swipercore
从
'swiper'
;
进口
{
betway东盟体育app离子湿管
}
从
'@betway东盟体育appionic/react'
;然后，我们可以安装模块：
进口
反应
从
“反应”
;
进口
{
离子体
，，，，
离子页
，，，，
betway东盟体育app离子湿管
}
从
'@betway东盟体育appionic/react'
;
进口
Swipercore
从
'swiper'
;
进口
'swiper/swiper-bundle.min.css'
;
进口
'@betway东盟体育appionic/react/css/ionic-swiper.css'
;
Swipercore
。
采用
（（
[[
betway东盟体育app离子湿管
这是给予的
）
;
const
家
：
反应
。
FC
=
（（
）
=>
{
返回
（（
<
离子页
>
<
离子体
>
<
swiper
>
<
swiperslide
>
滑动
1
<
/
swiperslide
>
<
swiperslide
>
滑动
2
<
/
swiperslide
>
<
swiperslide
>
滑动
3
<
/
swiperslide
>
<
/
swiper
>
<
/
离子体
>
<
/
离子页
>
）
;
}
;
出口
默认
家
;其他模块
默认情况下，For React的Swiper使用Swiper的核心版本，并且不导入任何其他模块。要使用导航或分页等模块，您需要先导入它们。
离子滑动
自动包括分页，滚动条，自动播放，键盘和缩放模块。如果您使用了这些功能中的任何一个，请确保将它们导入您的应用程序。
以下示例显示了如何安装导航和分页插件：
进口
反应
从
“反应”
;
进口
{
离子体
，，，，
离子页
，，，，
betway东盟体育app离子湿管
}
从
'@betway东盟体育appionic/react'
;
进口
Swipercore
，，，，
{
导航
，，，，
分页
}
从
'swiper'
;
进口
{
swiper
，，，，
swiperslide
}
从
'swiper/react'
;
swiper
。
采用
（（
[[
betway东盟体育app离子湿管
，，，，
导航
，，，，
分页
这是给予的
）
;
进口
'swiper/swiper-bundle.min.css'
;
进口
'@betway东盟体育appionic/react/css/ionic-swiper.css'
;
const
家
：
反应
。
FC
=
（（
）
=>
{
返回
（（
<
离子页
>
<
离子体
>
<
swiper分页
=
{
{
可单击
：
真的
}
}
导航
>
<
swiperslide
>
滑动
1
<
/
swiperslide
>
<
swiperslide
>
滑动
2
<
/
swiperslide
>
<
swiperslide
>
滑动
3
<
/
swiperslide
>
<
/
swiper
>
<
/
离子体
>
<
/
离子页
>
）
;
}
;
出口
默认
家
;
:::注意导入
swiper-bundle.min.css
所有模块的导入样式。使用SCSS或更少的样式时，您将需要导入每个模块的样式。看
https://swiperjs.com/reeact#styles
有关样式表的完整列表。:::
特性
直接在
组件而不是通过
选项
对象中
离子滑动
。
假设在应用程序中
离子滑动
我们有
SlidePerview
和
环形
选项集：
<
离子滑动选项
=
{
{
SlidePerview
：
3
，，，，
环形
：
真的
}
}
>
<
离子滑
>
滑动
1
<
/
离子滑
>
<
离子滑
>
滑动
2
<
/
离子滑
>
<
离子滑
>
滑动
3
<
/
离子滑
>
<
/
离子滑动
>
为了迁移，我们将这些选项从
选项
对象
直接作为属性的组件：
<
Swiper SlideSperview
=
{
3
}
环形
=
{
真的
}
>
<
swiperslide
>
滑动
1
<
/
swiperslide
>
<
swiperslide
>
滑动
2
<
/
swiperslide
>
<
swiperslide
>
滑动
3
<
/
swiperslide
>
<
/
swiper
>
以下是属性更改的完整列表
离子滑动
要掠夺：
| 姓名 | 笔记 |
|---|---|
| 选项 |
将每个选项直接设置为属性
零件。 |
| 模式 |
对于基于模式的不同样式，您可以针对幻灯片
.ios .swiper-container
或者
.md .swiper-container |
| 寻呼机 |
使用
分页
属性。需要安装分页模块。 |
| 滚动条 |
您可以继续使用
滚动条
属性，只需确保先安装滚动条模块即可。 |
可以在 https://swiperjs.com/reeact#swiper-props 。
事件
自从
swiper
离子框架没有提供组件，事件名称将没有betway东盟体育app
洋葱坡
他们的前缀。
假设在应用程序中
离子滑动
我们使用了
OnionsLidedIdChange
事件：
<
离子流洋子裂开
=
{
（（
）
=>
Onslidechange
（（
）
}
>
<
离子滑
>
滑动
1
<
/
离子滑
>
<
离子滑
>
滑动
2
<
/
离子滑
>
<
离子滑
>
滑动
3
<
/
离子滑
>
<
/
离子滑动
>
为了迁移，我们将事件的名称更改为
Onslidechange
：
<
Swiper Onslidechange
=
{
（（
）
=>
Onslidechange
（（
）
}
>
<
swiperslide
>
滑动
1
<
/
swiperslide
>
<
swiperslide
>
滑动
2
<
/
swiperslide
>
<
swiperslide
>
滑动
3
<
/
swiperslide
>
<
/
swiper
>
以下是事件名称更改时的完整列表
离子滑动
闪烁反应：
| 离子速度事件 | swiper事件 |
|---|---|
| Onionslidewillchange | OnslidechangetransitionStart |
| OnionsLidedIdChange | Onslidechangetransitionend |
| OnionsLided Loubtap | ondloubetap |
| Onionslidedrag | Onslidermove |
| Onionslidenextstart | OnslidenextransitionStart |
| Onionslidenextend | Onslidenextransitionend |
| OnionsLidePrevstart | OnslidePrevTransitionStart |
| OnionsLidePrevend | OnslidePrevTransitionEnd |
| OnionsLiderEachStart | OnreachBeginning |
| OnionsLiderErchend | Onreachend |
| Onionslidetap | ontap |
| OnionslideteTouchStart | Ontouchstart |
| OnionslidetTouchend | OnTouchend |
| OnionslidetransitionStart | OntransitionStart |
| OnionslidetransitionEnd | Ontransitionend |
| OnionsLidesDidload | Oninit |
可以在 https://swiperjs.com/reaect#swiper-vents 。
方法
大多数方法已被删除，以访问
swiper
道具直接。
访问这些属性可能很棘手，因为您想访问Swiper实例本身上的属性，而不是您的React组件。为此，我们建议您参考
swiper
实例通过
Onswiper
：
进口
反应
，，，，
{
美国
}
从
“反应”
;
...
const
家
：
反应
。
FC
=
（（
）
=>
{
const
[[
Swiperinstance
，，，，
SetSwiperInstance
这是给予的
=
美国
（（
）
;
返回
（（
...
<
Swiper Onswiper
=
{
（（
swiper
）
=>
SetSwiperInstance
（（
swiper
）
}
>
...
<
/
swiper
>
）
}
;
出口
默认
家
;
从这里，如果您想访问Swiper实例上的属性，则可以访问
Swiperinstance
。例如，如果您想检查
ISBEGINNING
财产，您可以做：
swiperinstance.isbeginning
。确保
Swiperinstance
虽然首先定义！
以下是从事方法的完整列表
离子滑动
闪烁反应：
| 姓名 | 笔记 |
|---|---|
| getActiveIndex（） |
使用
ActiveIndex
属性。 |
| getPreviousIndex（） |
使用
先前的索引
属性。 |
| getSwiper（） |
使用使用Swiper实例的引用
Onswiper
。请参见上面的示例。 |
| iSbeginning（） |
使用
ISBEGINNING
属性。 |
| isend（） |
使用
Isend
属性。 |
| 长度（） |
使用
幻灯片
属性。（即SwiperRef.Slides.Length） |
| lockswipetonext（） |
使用
lasselidesnext
属性。 |
| lockswipetoprev（） |
使用
允许Lideprev
属性。 |
| lockswipes（） |
使用
允许LIDENEXT
，，，，
允许Lideprev
， 和
AllowTouchMove
属性。 |
| startautoplay（） |
使用
自动播放
属性。 |
| Stopautoplay（） |
使用
自动播放
属性。 |
效果
如果您使用的是诸如Cube或Fade之类的效果，则可以安装它们类似于安装其他模块的方式：
进口
反应
从
“反应”
;
进口
{
离子体
，，，，
离子页
，，，，
betway东盟体育app离子湿管
}
从
'@betway东盟体育appionic/react'
;
进口
Swipercore
，，，，
{
效果
}
从
'swiper'
;
进口
{
swiper
，，，，
swiperslide
}
从
'swiper/react'
;
swiper
。
采用
（（
[[
betway东盟体育app离子湿管
，，，，
效果
这是给予的
）
;
进口
'swiper/swiper-bundle.min.css'
;
进口
'@betway东盟体育appionic/react/css/ionic-swiper.css'
;
const
家
：
反应
。
FC
=
（（
）
=>
{
返回
（（
<
离子页
>
<
离子体
>
<
swiper效应
=
“褪色”
>
<
swiperslide
>
滑动
1
<
/
swiperslide
>
<
swiperslide
>
滑动
2
<
/
swiperslide
>
<
swiperslide
>
滑动
3
<
/
swiperslide
>
<
/
swiper
>
<
/
离子体
>
<
/
离子页
>
）
;
}
;
出口
默认
家
;有关Swiper效果的更多信息，请参阅 https://swiperjs.com/reeact#effects 。
包起来
现在，您已经安装了swiper，可以享受一整套新的swiper功能。我们建议从 Swiper React引言 然后引用 Swiper API文档 。
我在哪里提交问题？
在开发问题之前，请考虑在 Swiper讨论委员会 或者 betway东盟体育app离子论坛 看看您的问题是否可以由社区解决。
如果您遇到了Swiper库的问题，则应在Swiper Repo上提交新错误： https://github.com/nolimits4web/swiper/issues
如果您遇到问题
betway东盟体育app离子湿管
模块，新的错误应在离子框架回购上提交：betway东盟体育app
https://github.com/betway东盟体育appionic-team/ionic-framework/issues