搜索文档 /

幻灯片

我们建议 Swiper.js 如果你需要一个现代的触摸滑块组件。我们的权力 ion-slides 组件,但我们现在建议开发人员直接使用Vue的Swiper。

本指南将介绍如何在您的离子框架应用程序中设置Vue的Swiper。betway东盟体育app它还将检查您可能需要迁移的任何迁移信息 ion-slides 到官方的Swiper Vue集成。

本指南仅适用于Swiper v6。Swiper v7的指南即将发布!

开始

首先,在你的项目中安装Swiper依赖项:


              npm
             
              安装
             swiper@6

打印稿(可选)

TypeScript用户需要添加以下内容 shims-vue.d.ts 文件:


              声明
             
              模块
             
              “偷窃者/ vue”
             
              
             
              进口
             _Vue
              
             
              “vue”
              
             
              出口
             
              
             
              偷窃者
             
              扩展
             
              _Vue
             
              
              
             
              出口
             
              
             
              SwiperSlide
             
              扩展
             
              _Vue
             
              
              
             
              
复制 复制

Swiper Vue不完全支持TypeScript,所以这段代码弥补了这一缺陷。遵循 https://github.com/nolimits4web/swiper/issues/3916 查询该问题的最新信息。

添加这个之后,您可能需要重新启动开发服务器。

刷与风格

接下来,我们需要导入基本的Swiper样式。我们建议在使用Swiper的组件中导入样式。这确保了样式只在需要时加载:


                <
               脚本
               >
               
                进口
               
                
               defineComponent
                
               
                
               
                “vue”
                
               
                进口
               
                “偷窃者/ swiper-bundle.min.css”
                
               
                出口
               
                默认的
               
                defineComponent
                
                
               
                ...
               
                
                
                
               
                
               脚本
               >
复制 复制

betway东盟体育app离子框架也提供了一些默认的样式,以及在旧的CSS变量中使用的 ion-slides .如果您想继续使用这些样式和CSS变量,请确保导入 betway东盟体育appionic-swiper.css 文件:


                <
               脚本
               >
               
                进口
               
                
               defineComponent
                
               
                
               
                “vue”
                
               
                进口
               
                “偷窃者/ swiper-bundle.min.css”
                
               
                进口
               
                “@betway东盟体育appionic / vue / css / ionic-swiper.css”
                
               
                出口
               
                默认的
               
                defineComponent
                
                
               
                ...
               
                
                
                
               
                
               脚本
               >
复制 复制

您还应该更新任何选择器以瞄准正确的Swiper类。如果你的目标是 ion-slides ,你应该以 .swiper-container .如果你的目标是 ion-slide ,你应该以 .swiper-slide

预处理程序(可选)

对于使用SCSS或Less样式的开发人员,Swiper还提供了这些文件的导入。这里的不同之处在于,每个Swiper模块被分割成自己的文件,所以如果使用转换效果、缩放或分页等模块,可能需要导入多个样式表。

如果你想导入基本的Swiper样式和分页样式,你可以做以下操作:


                <
               脚本
               >
               
                进口
               
                
               defineComponent
                
               
                
               
                “vue”
                
               
                进口
               
                “swiper.scss”
                
               
                进口
               
                “偷窃者/组件/分页/ pagination.scss”
                
               
                进口
               
                “@betway东盟体育appionic / vue / css / ionic-swiper.css”
                
               
                出口
               
                默认的
               
                defineComponent
                
                
               
                ...
               
                
                
                
               
                
               脚本
               >
复制 复制

Swiper有一个完整的样式表列表,你可以在这里导入: https://swiperjs.com/vue#styles

使用组件

Swiper出口两个组件: 偷窃者 SwiperSlide .的 偷窃者 分量相当于 IonSlides , SwiperSlide 相当于 IonSlide

这些组件是从 偷窃者/ vue 并提供给您的Vue组件:


                <
               模板
               >
             
                <
               ion-page
               >
             
                <
               离子含量
               >
             
                <
               偷窃者
               >
             
                <
               swiper-slide
               >
             幻灯片1
                
               swiper-slide
               >
             
                <
               swiper-slide
               >
             幻灯片3
                
               swiper-slide
               >
             
                <
               swiper-slide
               >
             幻灯片3
                
               swiper-slide
               >
             
                
               偷窃者
               >
             
                
               离子含量
               >
             
                
               ion-page
               >
             
                
               模板
               >
             
                <
               脚本
               >
               
                进口
               
                
               defineComponent
                
               
                
               
                “vue”
                
               
                进口
               
                
               偷窃者
                
               SwiperSlide
                
               
                
               
                “偷窃者/ vue”
                
               
                进口
               
                
               IonContent
                
               IonPage
                
               
                
               
                “@betway东盟体育appionic / vue”
                
               
                进口
               
                “偷窃者/ swiper-bundle.min.css”
                
               
                进口
               
                “@betway东盟体育appionic / vue / css / ionic-swiper.css”
                
               
                出口
               
                默认的
               
                defineComponent
                
                
               组件
                
               
                
               偷窃者
                
               SwiperSlide
                
               IonContent
                
               IonPage
                
               
                
                
               
                
                
                
               
                
               脚本
               >
复制 复制

Ionibetway东盟体育appcSwiper模块

在离子框架中有一些边缘情况,Swiper可能无法正确计算滑块betway东盟体育app尺寸。因此,我们创造了 betway东盟体育appIonicSwiper 模块来解决其中一些问题。

要安装它,我们首先需要导入core Swiper库和IonicSwiper模块:betway东盟体育app


              进口
             SwiperCore
              
             
              “偷窃者”
              
             
              进口
             
              
             betway东盟体育appIonicSwiper
              
             
              
             
              “@betway东盟体育appionic / vue”
              
复制 复制

然后我们可以安装模块:


                <
               脚本
               >
               
                进口
               
                
               defineComponent
                
               
                
               
                “vue”
                
               
                进口
               SwiperCore
                
               
                “偷窃者”
                
               
                进口
               
                
               偷窃者
                
               SwiperSlide
                
               
                
               
                “偷窃者/ vue”
                
               
                进口
               
                
               IonContent
                
               IonPage
                
               betway东盟体育appIonicSwiper
                
               
                
               
                “@betway东盟体育appionic / vue”
                
               
                进口
               
                “偷窃者/ swiper-bundle.min.css”
                
               
                进口
               
                “@betway东盟体育appionic / vue / css / ionic-swiper.css”
                
               SwiperCore
                
                使用
                
                
               betway东盟体育appIonicSwiper
                
                
                
               
                出口
               
                默认的
               
                defineComponent
                
                
               组件
                
               
                
               偷窃者
                
               SwiperSlide
                
               IonContent
                
               IonPage
                
               
                
                
               
                
                
                
               
                
               脚本
               >
复制 复制

额外的模块

默认情况下,Vue的Swiper使用Swiper的核心版本,不导入任何额外的模块。要使用诸如Navigation或Pagination之类的模块,您需要首先导入它们。

ion-slides 自动包括分页、滚动条、自动播放、键盘和缩放模块。如果您使用了这些特性中的任何一个,请确保在您的应用程序中导入它们。

下面的例子展示了如何安装导航和分页插件:


                <
               模板
               >
             
                <
               ion-page
               >
             
                <
               离子含量
               >
             
                <
               偷窃者
              
               :分页
                
                
               {clickable: true}
                
              
               导航
               >
             
                <
               swiper-slide
               >
             幻灯片1
                
               swiper-slide
               >
             
                <
               swiper-slide
               >
             幻灯片3
                
               swiper-slide
               >
             
                <
               swiper-slide
               >
             幻灯片3
                
               swiper-slide
               >
             
                
               偷窃者
               >
             
                
               离子含量
               >
             
                
               ion-page
               >
             
                
               模板
               >
             
                <
               脚本
               >
               
                进口
               
                
               defineComponent
                
               
                
               
                “vue”
                
               
                进口
               SwiperCore
                
               
                
               导航
                
               分页
                
               
                
               
                “偷窃者”
                
               
                进口
               
                
               偷窃者
                
               SwiperSlide
                
               
                
               
                “偷窃者/ vue”
                
               
                进口
               
                
               IonContent
                
               IonPage
                
               betway东盟体育appIonicSwiper
                
               
                
               
                “@betway东盟体育appionic / vue”
                
               
                进口
               
                “偷窃者/ swiper-bundle.min.css”
                
               
                进口
               
                “@betway东盟体育appionic / vue / css / ionic-swiper.css”
                
               SwiperCore
                
                使用
                
                
               betway东盟体育appIonicSwiper
                
               导航
                
               分页
                
                
                
               
                出口
               
                默认的
               
                defineComponent
                
                
               组件
                
               
                
               偷窃者
                
               SwiperSlide
                
               IonContent
                
               IonPage
                
                
               
                
                
                
               
                
               脚本
               >
复制 复制

:::注意导入 swiper-bundle.min.css 为所有模块导入样式。当使用SCSS或Less样式时,您将需要为每个模块导入样式。看到 https://swiperjs.com/vue#styles 查看完整的样式表列表。:::

属性

滑动器选项作为道具直接提供在 <偷窃者> 组件而不是通过 选项 对象 ion-slides

假设在一个应用中 ion-slides 我们有 slidesPerView 循环 选项设置:


                <
               模板
               >
             
                <
               ion-slides
              
               :选项
                
                
               {slidesPerView: true, loop: true}
                
               >
             
                <
               ion-slide
               >
             幻灯片1
                
               ion-slide
               >
             
                <
               ion-slide
               >
             幻灯片3
                
               ion-slide
               >
             
                <
               ion-slide
               >
             幻灯片3
                
               ion-slide
               >
             
                
               ion-slides
               >
             
                
               模板
               >
复制 复制

为了迁移,我们将这些选项移出 选项 对象上的 <偷窃者> 组件直接作为属性:


                <
               模板
               >
             
                <
               偷窃者
              
               : slides-per-view
                
                
               3.
                
              
               :循环
                
                
               真正的
                
               >
             
                <
               swiper-slide
               >
             幻灯片1
                
               swiper-slide
               >
             
                <
               swiper-slide
               >
             幻灯片3
                
               swiper-slide
               >
             
                <
               swiper-slide
               >
             幻灯片3
                
               swiper-slide
               >
             
                
               偷窃者
               >
             
                
               模板
               >
复制 复制

下面是一个完整的属性更改列表 ion-slides 偷窃者Vue:

的名字 笔记
选项 控件上直接将每个选项设置为属性 <偷窃者> 组件。
模式 对于基于模式的不同样式,您可以使用 .ios .swiper-container 。海事.swiper-container
寻呼机 使用 分页 财产。需要安装Pagination模块。
滚动条 你可以继续使用 滚动条 属性,请确保首先安装Scrollbar模块。

所有可用的属性在Swiper Vue可以在 https://swiperjs.com/vue#swiper-props

事件

偷窃者 组件不是由离子框架提供的,事件名称将没有betway东盟体育app ionSlide 前缀。

假设在一个应用中 ion-slides 我们使用了 ionSlideDidChange 事件:


                <
               模板
               >
             
                <
               ion-slides
              
               @ionSlideDidChange
                
                
               onSlideChange
                
               >
             
                <
               ion-slide
               >
             幻灯片1
                
               ion-slide
               >
             
                <
               ion-slide
               >
             幻灯片3
                
               ion-slide
               >
             
                <
               ion-slide
               >
             幻灯片3
                
               ion-slide
               >
             
                
               ion-slides
               >
             
                
               模板
               >
复制 复制

要进行迁移,我们将事件的名称更改为 slideChange


                <
               模板
               >
             
                <
               偷窃者
              
               @slideChange
                
                
               onSlideChange
                
               >
             
                <
               swiper-slide
               >
             幻灯片1
                
               swiper-slide
               >
             
                <
               swiper-slide
               >
             幻灯片3
                
               swiper-slide
               >
             
                <
               swiper-slide
               >
             幻灯片3
                
               swiper-slide
               >
             
                
               偷窃者
               >
             
                
               模板
               >
复制 复制

下面是从开始时事件名称更改的完整列表 ion-slides 偷窃者Vue:

ion-slides事件 偷窃者事件
ionSlideWillChange slideChangeTransitionStart
ionSlideDidChange slideChangeTransitionEnd
ionSlideDoubleTap doubleTap
ionSlideDrag sliderMove
ionSlideNextStart slideNextTransitionStart
ionSlideNextEnd slideNextTransitionEnd
ionSlidePrevStart slidePrevTransitionStart
ionSlidePrevEnd slidePrevTransitionEnd
ionSlideReachStart reachBeginning
ionSlideReachEnd reachEnd
ionSlideTap 利用
ionSlideTouchStart touchStart
ionSlideTouchEnd touchEnd
ionSlideTransitionStart transitionStart
ionSlideTransitionEnd transitionEnd
ionSlidesDidLoad 初始化

Swiper Vue中的所有活动都可以在以下网站找到 https://swiperjs.com/vue#swiper-events

方法

大多数方法已被删除,以便访问 <偷窃者> 直接的道具。当调用方法时,您不再需要访问 el美元 第一。

访问这些属性可能很棘手,因为您希望访问Swiper实例本身的属性,而不是您的Vue组件。要做到这一点,我们建议获取 偷窃者 通过实例 @swiper


                <
               模板
               >
             
                <
               偷窃者
              
               @swiper
                
                
               setSwiperInstance
                
               >
             ...
                
               偷窃者
               >
             
                
               模板
               >
             
                <
               脚本
               >
               
                进口
               
                
               defineComponent
                
               裁判
                
               
                
               
                “vue”
                
               
                出口
               
                默认的
               
                defineComponent
                
                
               
                ...
                
               
                设置
                
                
               
                
               
                常量
               幻灯片
                
               
                裁判
                
                
                
               
                常量
               
                setSwiperInstance
               
                
               
                
                偷窃者
                 
                任何
                
               
                =>
               
                
               幻灯片
                
               价值
                
               偷窃者
                
               
                
               
                返回
               
                
               setSwiperInstance
                
                
               
                
               
                
                
                
               
                
               脚本
               >
复制 复制

从这里开始,如果您想访问Swiper实例上的属性,则可以访问该属性 slides.value .例如,如果你想检查 isBeginning 财产,你可以做: slides.value.isBeginning .确保 slides.value 是首先定义的!

下面是一个完整的方法更改列表 ion-slides 偷窃者Vue:

的名字 笔记
getActiveIndex () 使用 activeIndex 财产。
getPreviousIndex () 使用 previousIndex 财产。
getSwiper () 使用。获取对Swiper实例的引用 @swiper .看到上面的例子。
isBeginning () 使用 isBeginning 财产。
isEnd () 使用 isEnd 财产。
长度() 使用 幻灯片 财产。(即swiperRef.slides.length)
lockSwipeToNext () 使用 allowSlidesNext 财产。
lockSwipeToPrev () 使用 allowSlidePrev 财产。
lockSwipes () 使用 allowSlideNext allowSlidePrev , allowTouchMove 属性来代替。
startAutoplay () 使用 播放 财产。
stopAutoplay () 使用 播放 财产。

影响

如果你正在使用Cube或Fade效果,你可以像安装其他模块一样安装它们:


                <
               模板
               >
             
                <
               偷窃者
              
               效果
                
                
               褪色
                
               >
             
                <
               swiper-slide
               >
             幻灯片1
                
               swiper-slide
               >
             
                <
               swiper-slide
               >
             幻灯片2
                
               swiper-slide
               >
             
                <
               swiper-slide
               >
             幻灯片3
                
               swiper-slide
               >
             ...
                
               偷窃者
               >
             
                
               模板
               >
             
                <
               脚本
               >
               
                进口
               
                
               defineComponent
                
               
                
               
                “vue”
                
               
                进口
               SwiperCore
                
               
                
               EffectFade
                
               
                
               
                “偷窃者”
                
               
                进口
               
                
               偷窃者
                
               SwiperSlide
                
               
                
               
                “偷窃者/ vue”
                
               
                进口
               
                “偷窃者/ swiper-bundle.min.css”
                
               
                进口
               
                “@betway东盟体育appionic / vue / css / ionic-swiper.css”
                
               SwiperCore
                
                使用
                
                
               EffectFade
                
                
                
               
                出口
               
                默认的
               
                defineComponent
                
                
               
                ...
               
                
                
                
               
                
               脚本
               >
复制 复制

有关Swiper效果的更多信息,请参阅 https://swiperjs.com/vue#effects

总结

现在你已经安装了Swiper,这里有一整套新的Swiper功能供你享受。我们建议从 偷窃者Vue介绍 然后引用 Swiper API文档

我在哪里提交问题?

在打开一个问题之前,请考虑创建一个帖子 偷窃者讨论板 或者是 betway东盟体育app离子论坛 看看你的问题能否被社区解决。

如果你在Swiper库中遇到问题,新的bug应该在Swiper repo上归档: https://github.com/nolimits4web/swiper/issues

如果你遇到了问题 betway东盟体育appIonicSwiper 模块,新的bug应该被归档到Ionic Framework repo上:betway东盟体育app https://github.com/betway东盟体育appionic-team/ionic-framework/issues

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