搜索文档 /

幻灯片

我们推荐 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

以前的
虚拟滚动
下一个
config
Baidu