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