幻灯片
我们建议
Swiper.js
如果您需要现代触摸滑块组件。它为我们提供动力
离子幻灯片
组件,但我们现在建议开发者直接在Angular中使用Swiper。
本指南将介绍如何在你的Ionic Framework应用程序中设置Angular的Swiper。betway东盟体育app它还将检查您可能需要迁移的任何迁移信息
离子幻灯片
到官方的Swiper Angular集成。
本指南仅适用于SWIPER V6。Swiper V7的指南即将推出!
开始
首先,在你的项目中安装Swiper依赖项:
NPM.
安装
swiper@6
刷与风格
接下来,我们需要导入基本的Swiper样式。我们建议在使用Swiper的组件中导入样式。这确保了样式只在需要时加载:
//幻灯片..ponent.scs.
@
进口
'〜摇动/摇头'
;
betway东盟体育app离子框架也提供了一些默认的样式,以及在旧的CSS变量中使用的
离子幻灯片
.如果您想继续使用这些样式和CSS变量,请确保导入
betway东盟体育app离子 - SWIPER.CSS.
文件:
//幻灯片..ponent.scs.
@
进口
'〜摇动/摇头'
;
@
进口
'〜@betway东盟体育app离子/棱角/ CSS /离子摇机'
;
您还应该更新任何选择器以定位正确的SWIPER类。如果你是针对性的
离子幻灯片
,你应该瞄准
.swiper-container
.如果你是针对性的
离子滑动
,你应该瞄准
.sswiper-slide.
.
香草CSS(可选)
对于未使用CSS预处理器的开发人员,SWIPER还将样式捆绑在一起。值得注意的是,这也将为所有模块导入样式。
// slide.Component.css.
@
进口
“~偷窃者/ swiper-bundle.min”
;
@
进口
'〜@betway东盟体育app离子/棱角/ CSS /离子摇机'
;
使用组件
Swiper出口两个组件:
偷窃者
和
滑动仪
.这
偷窃者
组件相当于
厄尔酱
,
滑动仪
相当于
IonSlide
.
这些组件是通过添加注册的
SwiperModule
到您希望使用SWIPER的组件的模块。
/ / app.module.ts
进口
{
SwiperModule
}
从
“偷窃者/角”
;
@
NgModule
(
{
进口
:
[
SwiperModule
]
,
}
)
出口
类
AppModule
{
}
<!——swiper.component.html >
<
摇动者
>
<
swiper-slide
>
幻灯片1
swiper-slide
>
<
swiper-slide
>
幻灯片3
swiper-slide
>
<
swiper-slide
>
幻灯片3
swiper-slide
>
摇动者
>
Ionibetway东盟体育appcSwiper模块
在离子框架中有一些边缘情况,Swiper可能无法正确计算滑块betway东盟体育app尺寸。因此,我们创造了
betway东盟体育appIonicSwiper
模块来解决其中一些问题。
要安装它,我们首先需要导入core Swiper库和IonicSwiper模块:betway东盟体育app
// slides.Component.ts.
进口
SwiperCore
从
'摇摆物'
;
进口
{
betway东盟体育appIonicSwiper
}
从
“@betway东盟体育appionic /角”
;
然后我们可以安装模块:
// slides.Component.ts.
进口
{
组件
}
从
“@angular /核心”
;
进口
SwiperCore
从
'摇摆物'
;
进口
{
betway东盟体育appIonicSwiper
}
从
“@betway东盟体育appionic /角”
;
SwiperCore
.
使用
(
[
betway东盟体育appIonicSwiper
]
)
;
@
组件
(
{
选择器
:
'App-Slide-示例'
,
TemplateURL.
:
“slides.component.html”
,
styleUrls
:
[
'幻灯片..ponent.scss'
]
}
)
出口
类
SlidesExample
{
......
}
额外的模块
默认情况下,Angular的Swiper会使用Swiper的核心版本,并且不会导入任何额外的模块。要使用诸如Navigation或Pagination之类的模块,您需要首先导入它们。
离子幻灯片
自动包括分页、滚动条、自动播放、键盘和缩放模块。如果您使用了这些特性中的任何一个,请确保在您的应用程序中导入它们。
以下示例显示了如何安装导航和分页插件:
// slides.Component.ts.
进口
{
组件
}
从
“@angular /核心”
;
进口
SwiperCore
,
{
导航
,
分页
}
从
'摇摆物'
;
进口
{
betway东盟体育appIonicSwiper
}
从
“@betway东盟体育appionic /角”
;
SwiperCore
.
使用
(
[
betway东盟体育appIonicSwiper
,
导航
,
分页
]
)
;
@
组件
(
{
选择器
:
'App-Slide-示例'
,
TemplateURL.
:
“slides.component.html”
,
styleUrls
:
[
'幻灯片..ponent.scss'
]
}
)
出口
类
SlidesExample
{
......
}
<!——swiper.component.html >
<
摇动者
(分页)
=
"
{clickable: true}
"
导航
>
<
swiper-slide
>
幻灯片1
swiper-slide
>
<
swiper-slide
>
幻灯片3
swiper-slide
>
<
swiper-slide
>
幻灯片3
swiper-slide
>
摇动者
>
:::注意导入
swiper-bundle.min.css
导入所有模块的样式。使用SCSS或更少的样式时,您需要导入每个模块的样式。看
https://swiperjs.com/angular#styles
有关样式表的完整列表。:::
特性
滑动器选项作为道具直接提供在
组件而不是通过
选项
对象
离子幻灯片
.
让我们在一个应用中说
离子幻灯片
我们有
slidesPerView
和
环形
选项集:
<
离子幻灯片
(选项)
=
"
{slidesPerView: true, loop: true}
"
>
<
离子滑动
>
幻灯片1
离子滑动
>
<
离子滑动
>
幻灯片3
离子滑动
>
<
离子滑动
>
幻灯片3
离子滑动
>
离子幻灯片
>
要迁移,我们会将这些选项移出
选项
对象和对象
组件直接作为属性:
<
摇动者
[slidesperview]
=
"
3.
"
[环形]
=
"
真正的
"
>
<
swiper-slide
>
幻灯片1
swiper-slide
>
<
swiper-slide
>
幻灯片3
swiper-slide
>
<
swiper-slide
>
幻灯片3
swiper-slide
>
摇动者
>
以下是出发时的财产清单
离子幻灯片
偷窃者角:
姓名 | 笔记 |
---|---|
选项 |
控件上直接将每个选项设置为属性
成分。 |
模式 |
对于基于模式的不同样式,您可以针对幻灯片
.ios .swiper-container
或
。海事.swiper-container |
寻呼机 |
使用
分页
财产。需要安装Pagination模块。 |
滚动条 |
你可以继续使用
滚动条
属性,只需先安装滚动条模块。 |
所有在Swiper Angular中可用的属性都可以在以下网站找到 https://swiperjs.com/angular#swiper-props. .
事件
自
偷窃者
组件不是由离子框架提供的,事件名称不会有betway东盟体育app
ionSlide
向他们前缀。
让我们在一个应用中说
离子幻灯片
我们使用了
ionSlideDidChange
事件:
<
离子幻灯片
(ionSlideDidChange)
=
"
onSlideChange ()
"
>
<
离子滑动
>
幻灯片1
离子滑动
>
<
离子滑动
>
幻灯片3
离子滑动
>
<
离子滑动
>
幻灯片3
离子滑动
>
离子幻灯片
>
要进行迁移,我们将事件的名称更改为
slideChange
:
<
摇动者
(slideChange)
=
"
onSlideChange ()
"
>
<
swiper-slide
>
幻灯片1
swiper-slide
>
<
swiper-slide
>
幻灯片3
swiper-slide
>
<
swiper-slide
>
幻灯片3
swiper-slide
>
摇动者
>
下面是从开始时事件名称更改的完整列表
离子幻灯片
偷窃者角:
离子幻灯片事件 | 偷窃者事件 |
---|---|
inslidewillchange. | SlideChangeTransitionStart. |
ionSlideDidChange | SlideChangeTranitingend. |
Ionsliddenubletap. | doubleTap |
ionSlideDrag | sliderMove |
Ionslidenextstart. | SlidenextTransitionStart. |
ionSlideNextEnd | SlidenextTransitiondend. |
ionSlidePrevStart | slideprevtransitionstart. |
ionSlidePrevEnd | slidePrevTransitionEnd |
ionSlideReachStart | Reachbeginning. |
ionSlideReachEnd | reachEnd |
ICELIDETAP. | 轻敲 |
Ionslidetouchstart. | touchStart |
Ionslidetouchend | 触发 |
IonsLidetransitionStart. | transitionStart |
Ionslidetransitadent. | transitionEnd |
ionslidesdidload. | 初始化 |
握持器中可用的所有事件都可以找到 https://swiperjs.com/angular#swiper-events .
方法
大多数方法已被删除,以便访问
直接支撑。
访问这些属性可能是棘手的,因为要在SWIPER实例本身上访问“SWIPER实例”本身,而不是Angular组件。为此,我们建议参考
偷窃者
通过实例
(读卡器)
:
<!——slides.component.html >
<
摇动者
(读卡器)
=
"
setSwiperInstance(事件)
"
>
<
swiper-slide
>
幻灯片1
swiper-slide
>
<
swiper-slide
>
幻灯片3
swiper-slide
>
<
swiper-slide
>
幻灯片3
swiper-slide
>
摇动者
>
// slides.Component.ts.
进口
{
组件
}
从
“@angular /核心”
;
进口
SwiperCore
从
'摇摆物'
;
进口
{
betway东盟体育appIonicSwiper
}
从
“@betway东盟体育appionic /角”
;
SwiperCore
.
使用
(
[
betway东盟体育appIonicSwiper
]
)
;
@
组件
(
{
选择器
:
'App-Slide-示例'
,
TemplateURL.
:
“slides.component.html”
,
styleUrls
:
[
'幻灯片..ponent.scss'
]
}
)
出口
类
SlidesExample
{
私人
幻灯片
;
构造函数
(
)
{
}
setswiperinstance.
(
电动汽车
)
{
这个
.
幻灯片
=
电动汽车
;
}
}
从这里,如果您想访问您将访问的SWIPER实例上的属性
this.slides
.例如,如果你想检查
isBeginning
财产,你可以做:
this.slides.isBeginning
.确保
this.slides
是首先定义的!
以下是从中开始的方法更改的完整列表
离子幻灯片
偷窃者角:
姓名 | 笔记 |
---|---|
getActiveIndex () |
使用
activeIndex
财产。 |
getPreviousIndex () |
使用
inumberIndex.
财产。 |
getswiper() |
使用使用的对SWIPER实例引用
(读卡器)
.见上面的例子。 |
isBeginning () |
使用
isBeginning
财产。 |
isend() |
使用
is
财产。 |
长度() |
使用
幻灯片
财产。(即swiperRef.slides.length) |
lockSwipeToNext () |
使用
allowSlidesNext
财产。 |
lockSwipeToPrev () |
使用
允许网络普雷维夫
财产。 |
lockSwipes () |
使用
允许网络文档
,
允许网络普雷维夫
,
allowtouchmove.
属性来代替。 |
startAutoplay () |
使用
播放
财产。 |
stopautoplay() |
使用
播放
财产。 |
影响
如果您使用的是多维数据集或淡入效果,则可以安装类似于您安装其他模块的效果:
<!——slides.component.html >
<
摇动者
影响
=
"
褪色
"
>
<
swiper-slide
>
幻灯片1
swiper-slide
>
<
swiper-slide
>
幻灯片3
swiper-slide
>
<
swiper-slide
>
幻灯片3
swiper-slide
>
摇动者
>
// slides.Component.ts.
进口
{
组件
}
从
“@angular /核心”
;
进口
SwiperCore
,
{
EffectFade.
}
从
'摇摆物'
;
进口
{
betway东盟体育appIonicSwiper
}
从
“@betway东盟体育appionic /角”
;
SwiperCore
.
使用
(
[
betway东盟体育appIonicSwiper
,
EffectFade.
]
)
;
@
组件
(
{
选择器
:
'App-Slide-示例'
,
TemplateURL.
:
“slides.component.html”
,
styleUrls
:
[
'幻灯片..ponent.scss'
]
}
)
出口
类
SlidesExample
{
私人
幻灯片
;
构造函数
(
)
{
}
setswiperinstance.
(
电动汽车
)
{
这个
.
幻灯片
=
电动汽车
;
}
}
有关Swiper效果的更多信息,请参阅 https://swiperjs.com/angular#effects. .
总结
现在你已经安装了Swiper,这里有一整套新的Swiper功能供你享受。我们建议从 摇头角介绍 然后引用 Swiper API文档 .
我在哪里提交问题?
在开设问题之前,请考虑在此上创建帖子 偷窃者讨论板 或者 betway东盟体育app离子论坛 )查看您的问题是否可以由社区解决。
如果您遇到SWIPER库的问题,则应在SWIPER REPO上提交新错误: https://github.com/nolimits4web/swiper/issues
如果你遇到了问题
betway东盟体育appIonicSwiper
模块,应该在离子框架repo上提交新错误:betway东盟体育app
https://github.com/betway东盟体育appionic-team/ionic-framework/issues