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