搜索文件 /

幻灯片

我们建议 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

以前的
虚拟滚动
下一个
配置
Baidu