幻灯片
我们推荐
Swiper.js.
如果您需要现代触摸滑块组件。它为我们提供动力
离子幻灯片
组件，但我们现在建议开发人员直接使用Swiper for Vue。
本指南将审议如何在离子框架应用程序中获取Swiper for Vue设置。betway东盟体育app它还将覆盖您可能需要移动的任何迁移信息
离子幻灯片
官方摇摆vue集成。
本指南仅适用于SWIPER V6。SWIPER V7的指南即将推出！
入门
要开始，请在项目中安装SWIPER依赖项：
NPM.
安装
Swiper @ 6.类型签字（可选）
CypeScript用户需要将以下内容添加到他们的
Shims-Vue.d.ts.
文件：
宣布
模块
'SWIPER / VUE'
{
进口
_Vue.
从
'vue'
;
出口
班级
摇动者
延伸
_Vue.
{
}
出口
班级
滑动仪
延伸
_Vue.
{
}
}Swiper Vue没有完全支持TypeScript，因此此代码桥接差距。跟随 https://github.com/nolimits4web/swiper/issues/3916 有关此问题的更新。
添加此后，您可能需要重新启动开发服务器。
用风格滑动
接下来，我们需要导入基本SWIPER样式。我们建议您在使用SWIPER的组件中导入样式。这可确保仅在需要时加载样式：
<
脚本
>
进口
{
绝缘组分
}
从
'vue'
;
进口
'Swiper / Swiper-bundle.min.css'
;
出口
默认
绝缘组分
（
{
......
}
的）
;
脚本
>
betway东盟体育app离子框架还提供了一些默认样式，以及在旧内部使用的CSS变量
离子幻灯片
。如果您想继续使用这些样式和CSS变量，请务必进口
betway东盟体育app离子 - SWIPER.CSS.
文件：
<
脚本
>
进口
{
绝缘组分
}
从
'vue'
;
进口
'Swiper / Swiper-bundle.min.css'
;
进口
'@betway东盟体育app离子/ Vue / CSS / IONIC-SWIPER.CSS'
;
出口
默认
绝缘组分
（
{
......
}
的）
;
脚本
>
您还应更新任何选择器以定位正确的SWIPER类。如果你是针对性的
离子幻灯片
，你应该瞄准
.sswiper-container.
。如果你是针对性的
离子幻灯片
，你应该瞄准
.sswiper-slide.
。
预处理器（可选）
对于使用SCSS或更少样式的开发人员，SWIPER还为这些文件提供导入。这里的不同之处在于每个SWIPER模块都被分解为自己的文件，因此如果您使用的模块如过渡效果，缩放或分页，则可能必须导入多个样式表。
如果您想要导入基本播放样式和分页样式，您将执行以下操作：
<
脚本
>
进口
{
绝缘组分
}
从
'vue'
;
进口
'swiper.scss'
;
进口
'Swiper / Components / Pagination / Pagination.scs'
;
进口
'@betway东盟体育app离子/ Vue / CSS / IONIC-SWIPER.CSS'
;
出口
默认
绝缘组分
（
{
......
}
的）
;
脚本
>Swiper有一个完整的样式表列表，您可以在此导入： https://swiperjs.com/vue#styles. 。
使用组件
Swiper出口两个组件：
摇动者
和
滑动仪
。这
摇动者
组件相当于
伊欧莱德
， 和
滑动仪
相当于
伊龙德
。
这些组件从
Swiper / Vue.
并提供给您的VUE组件：
<
模板
>
<
离子页面
>
<
离子内容
>
<
摇动者
>
<
滑动滑动
>
幻灯片1
滑动滑动
>
<
滑动滑动
>
幻灯片3.
滑动滑动
>
<
滑动滑动
>
幻灯片3.
滑动滑动
>
摇动者
>
离子内容
>
离子页面
>
模板
>
<
脚本
>
进口
{
绝缘组分
}
从
'vue'
;
进口
{
摇动者
那
滑动仪
}
从
'SWIPER / VUE'
;
进口
{
离子联系
那
离子页面
}
从
'@betway东盟体育app ionic / vue'
;
进口
'Swiper / Swiper-bundle.min.css'
;
进口
'@betway东盟体育app离子/ Vue / CSS / IONIC-SWIPER.CSS'
;
出口
默认
绝缘组分
（
{
成分
：
{
摇动者
那
滑动仪
那
离子联系
那
离子页面
那
}
那
}
的）
;
脚本
>离子鹬模betway东盟体育app块
在离子框架中存在一些边缘案例，其中摇头可能无法正确计算滑块尺betway东盟体育app寸。结果，我们已经创造了
betway东盟体育app离子百货器
模块解决这些问题中的一些问题。
要安装它，我们首先需要导入核心SWIPER库和IONICSWIPER模块：betway东盟体育app
进口
斯科尔德
从
'摇摆物'
;
进口
{
betway东盟体育app离子百货器
}
从
'@betway东盟体育app ionic / vue'
;然后我们可以安装模块：
<
脚本
>
进口
{
绝缘组分
}
从
'vue'
;
进口
斯科尔德
从
'摇摆物'
;
进口
{
摇动者
那
滑动仪
}
从
'SWIPER / VUE'
;
进口
{
离子联系
那
离子页面
那
betway东盟体育app离子百货器
}
从
'@betway东盟体育app ionic / vue'
;
进口
'Swiper / Swiper-bundle.min.css'
;
进口
'@betway东盟体育app离子/ Vue / CSS / IONIC-SWIPER.CSS'
;
斯科尔德
。
采用
（
[
betway东盟体育app离子百货器
]
的）
;
出口
默认
绝缘组分
（
{
成分
：
{
摇动者
那
滑动仪
那
离子联系
那
离子页面
那
}
那
}
的）
;
脚本
>额外的模块
默认情况下，Vue的Swiper使用核心版本的智能版本，不会导入任何其他模块。要使用导航或分页等模块，您需要先导入它们。
离子幻灯片
自动包含分页，滚动条，自动播放，键盘和缩放模块。如果您使用这些功能中的任何一个，请务必在您的应用程序中导入它们。
以下示例显示了如何安装导航和分页插件：
<
模板
>
<
离子页面
>
<
离子内容
>
<
摇动者
：Pagination.
=
“
{可点击：true}
“
导航
>
<
滑动滑动
>
幻灯片1
滑动滑动
>
<
滑动滑动
>
幻灯片3.
滑动滑动
>
<
滑动滑动
>
幻灯片3.
滑动滑动
>
摇动者
>
离子内容
>
离子页面
>
模板
>
<
脚本
>
进口
{
绝缘组分
}
从
'vue'
;
进口
斯科尔德
那
{
导航
那
分页
}
从
'摇摆物'
;
进口
{
摇动者
那
滑动仪
}
从
'SWIPER / VUE'
;
进口
{
离子联系
那
离子页面
那
betway东盟体育app离子百货器
}
从
'@betway东盟体育app ionic / vue'
;
进口
'Swiper / Swiper-bundle.min.css'
;
进口
'@betway东盟体育app离子/ Vue / CSS / IONIC-SWIPER.CSS'
;
斯科尔德
。
采用
（
[
betway东盟体育app离子百货器
那
导航
那
分页
]
的）
;
出口
默认
绝缘组分
（
{
成分
：
{
摇动者
那
滑动仪
那
离子联系
那
离子页面
}
那
}
的）
;
脚本
>
:::注意导入
Swiper-bundle.min.css.
导入所有模块的样式。使用SCSS或更少的样式时，您需要导入每个模块的样式。看
https://swiperjs.com/vue#styles.
有关样式表的完整列表。:::
特性
SWIPER选项直接作为道具提供
组件而不是通过
选项
对象
离子幻灯片
。
让我们在一个应用中说
离子幻灯片
我们有
幻灯片
和
环形
选项集：
<
模板
>
<
离子幻灯片
：选项
=
“
{slidesperview：true，loop：true}
“
>
<
离子幻灯片
>
幻灯片1
离子幻灯片
>
<
离子幻灯片
>
幻灯片3.
离子幻灯片
>
<
离子幻灯片
>
幻灯片3.
离子幻灯片
>
离子幻灯片
>
模板
>
要迁移，我们会将这些选项移出
选项
对象和对象
组件直接作为属性：
<
模板
>
<
摇动者
：按照幻灯片
=
“
3.
“
：环形
=
“
真的
“
>
<
滑动滑动
>
幻灯片1
滑动滑动
>
<
滑动滑动
>
幻灯片3.
滑动滑动
>
<
滑动滑动
>
幻灯片3.
滑动滑动
>
摇动者
>
模板
>
以下是出发时的完整属性清单
离子幻灯片
到Swiper Vue：
| 姓名 | 笔记 |
|---|---|
| 选项 |
将每个选项设置为preame作为属性
零件。 |
| 模式 |
对于基于模式的不同样式，您可以针对幻灯片
。os.swiper-container
要么
.md .swiper-container |
| 寻呼机 |
使用
分页
物业。需要安装分页模块。 |
| 滚动条 |
你可以继续使用
滚动条
属性，只需先安装滚动条模块。 |
可以在Swiper Vue中提供的所有属性 https://swiperjs.com/vue#swiper-props. 。
事件
自从以来
摇动者
组件不是由离子框架提供的，事件名称不会有betway东盟体育app
伊龙德
向他们前缀。
让我们在一个应用中说
离子幻灯片
我们使用了
IcesLideddidChange.
事件：
<
模板
>
<
离子幻灯片
@ionslideddidchange.
=
“
onslidechange.
“
>
<
离子幻灯片
>
幻灯片1
离子幻灯片
>
<
离子幻灯片
>
幻灯片3.
离子幻灯片
>
<
离子幻灯片
>
幻灯片3.
离子幻灯片
>
离子幻灯片
>
模板
>
要迁移，我们会将事件的名称更改为
滑动
：
<
模板
>
<
摇动者
@slidechange.
=
“
onslidechange.
“
>
<
滑动滑动
>
幻灯片1
滑动滑动
>
<
滑动滑动
>
幻灯片3.
滑动滑动
>
<
滑动滑动
>
幻灯片3.
滑动滑动
>
摇动者
>
模板
>
以下是事件名称的完整列表
离子幻灯片
到Swiper Vue：
| 离子幻灯片事件 | SWIPER活动 |
|---|---|
| IceslideWillchange. | SlideChangeTransitionStart. |
| IcesLideddidChange. | SlideChangeTransitiond |
| Iensliddenubletap. | 双击 |
| Iceslidedrag. | 滑石 |
| Ionslidenextstart. | SlidenextTransitionStart. |
| Ionslidenexemend | SlidenextTransitiondend. |
| IonslidePrevstart. | slideprevtransitionstart. |
| IonslidePrevend. | slideprevtransitiond. |
| Ionsliderach Start. | Reachbeginning. |
| Ionslidereachend. | 达 |
| ICELIDETAP. | 轻敲 |
| Ionslidetouchstart. | 触摸杆 |
| IonslideTouchend. | 触发 |
| Ionslidetransitionstart. | TransitionStart. |
| IonslidetransitConitiond. | 过渡 |
| ionslidesdidload. | 在里面 |
可以在Swiper Vue中找到所有可用的事件 https://swiperjs.com/vue#swiper-events. 。
方法
大多数方法已被删除，支持访问
直接支撑。调用方法时，您不再需要访问
$ el.
第一的。
访问这些属性可能是棘手的，因为要在SWIPER实例本身上访问“SWIPER实例”本身，而不是您的VUE组件。为此，我们建议参考
摇动者
实例Via
@swiper.
：
<
模板
>
<
摇动者
@swiper.
=
“
setswiperinstance.
“
>
......
摇动者
>
模板
>
<
脚本
>
进口
{
绝缘组分
那
裁判
}
从
'vue'
;
出口
默认
绝缘组分
（
{
......
那
设置
（
的）
{
Const.
幻灯片
=
裁判
（
的）
;
Const.
setswiperinstance.
=
（
摇动者
：
任何
的）
=>
{
幻灯片
。
价值
=
摇动者
;
}
返回
{
setswiperinstance.
}
;
}
}
的）
;
脚本
>
从这里，如果您想访问您将访问的SWIPER实例上的属性
幻灯片
。例如，如果你想检查一下
isbeginning.
财产，你可以做：
幻灯片.Value.isbeginning.
。确保
幻灯片
首先定义！
以下是从中开始的方法更改的完整列表
离子幻灯片
到Swiper Vue：
| 姓名 | 笔记 |
|---|---|
| getactiveIndex（） |
使用
activeIndex.
物业。 |
| getPreviousIndex（） |
使用
invectinex.
物业。 |
| getswiper（） |
使用使用的SWIPER实例引用
@swiper.
。看到上面的例子。 |
| isbeginning（） |
使用
isbeginning.
物业。 |
| isend（） |
使用
is
物业。 |
| 长度（） |
使用
幻灯片
物业。（i.e swiperreref.slides.length） |
| lockswipetonext（） |
使用
允许replide.ext.
物业。 |
| lockswipetoprev（） |
使用
允许网络普雷维夫
物业。 |
| lockswipes（） |
使用
允许LiveNext.
那
允许网络普雷维夫
， 和
allowtouchmove.
属性。 |
| startautoplay（） |
使用
自动播放
物业。 |
| stopautoplay（） |
使用
自动播放
物业。 |
效果
如果您使用的效果如CUBE或FAID，则可以安装类似于您安装其他模块的方式：
<
模板
>
<
摇动者
影响
=
“
褪色
“
>
<
滑动滑动
>
幻灯片1
滑动滑动
>
<
滑动滑动
>
幻灯片2.
滑动滑动
>
<
滑动滑动
>
幻灯片3.
滑动滑动
>
......
摇动者
>
模板
>
<
脚本
>
进口
{
绝缘组分
}
从
'vue'
;
进口
斯科尔德
那
{
效果
}
从
'摇摆物'
;
进口
{
摇动者
那
滑动仪
}
从
'SWIPER / VUE'
;
进口
'Swiper / Swiper-bundle.min.css'
;
进口
'@betway东盟体育app离子/ Vue / CSS / IONIC-SWIPER.CSS'
;
斯科尔德
。
采用
（
[
效果
]
的）
;
出口
默认
绝缘组分
（
{
......
}
的）
;
脚本
>有关SWIPER中效果的更多信息，请参阅 https://swiperjs.com/vue#effects. 。
包起来
现在您安装了SWIPER，有一整套新的SWIPER功能让您享受。我们建议首发 Swiper Vue介绍 然后引用 SWIPER API文档 。
我在哪里提交问题？
在开放问题之前，请考虑在此创建帖子 SWIPER讨论板 或者 betway东盟体育app离子论坛 看看您的问题是否可以由社区解决。
如果您遇到SWIPER库的问题，则应在SWIPER REPO上提交新错误： https://github.com/nolimits4web/swiper/issues.
如果您遇到了问题
betway东盟体育app离子百货器
模块，应该在离子框架repo上提交新错误：betway东盟体育app
https://github.com/betway东盟体育appionic-team/ionic-framework/issues.