介绍
vue2-swiper 是一个 Vue.js 2.x 的轮播插件。它支持无限循环、强大的自定义 API 和事件、移动设备兼容、自适应布局等功能。
如果你需要一个简单易用的轮播插件，vue2-swiper 可以成为你的选择。
安装
vue2-swiper 的安装非常简单，可以通过 npm 来安装：
npm install vue2-swiper --save
使用
在你的 Vue.js 工程中引入 vue2-swiper：
import Vue2Swiper from 'vue2-swiper'; import 'vue2-swiper/dist/vue2-swiper.css'; Vue.use(Vue2Swiper);
接下来就可以在你的组件中使用了。比如：
-- -------------------- ---- -------
----------
-----
------- ------------------------
------------------- ----------------
------------------- ----------------
------------------- ----------------
------------------- ----------------
------------------- ----------------
---------
------
-----------
--------
------ ------- -
------ -
------ -
------------- -
----------- -
--- ---------------------
---------- -----
--
----------- -
------- ----------------------
------- ----------------------
--
--
--
--
--
---------
-------
-- -------- --
------------------ -
--------- ---------
------- -----
----- ----
---------- -----------------
-
--------属性
options
你可以通过 options 来配置 swiper。options 的具体配置项可以参见 Swiper API。
<swiper :options="options"> <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> </swiper>
-- -------------------- ---- -------
------ -
------ -
-------- -
-------------- --
------------- ---
----------- -
------- ----------------------
------- ----------------------
--
--
--
--speed
轮播的速度，单位为毫秒。默认为 300。
<swiper :speed="1000"> <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> </swiper>
loop
是否循环播放。默认为 false。
<swiper :loop="true"> <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> </swiper>
autoplay
是否自动播放。默认为 false。
<swiper :autoplay="true"> <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> </swiper>
full-screen
是否全屏展示。默认为 false。
<swiper :full-screen="true"> <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> </swiper>
direction
轮播的方向。默认为 horizontal。
<swiper :direction="'vertical'"> <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> </swiper>
show-scrollbar
是否显示滚动条。默认为 false。
<swiper :show-scrollbar="true"> <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> </swiper>
事件
vue2-swiper 支持多个事件。这里列举几个常用的事件。
slideChange
当幻灯片切换结束时触发。
<swiper @slideChange="handleSlideChange"> <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> </swiper>
methods: {
handleSlideChange() {
console.log('slide change');
},
},transitionEnd
当滑动过渡结束时触发。
<swiper @transitionEnd="handleTransitionEnd"> <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> </swiper>
methods: {
handleTransitionEnd() {
console.log('transition end');
},
},例子
下面给出一个例子，它展示了轮播的基本用法，以及如何使用 options 来自定义轮播：
-- -------------------- ---- -------
----------
-----
------- ------------------------
------------------- ----------------
------------------- ----------------
------------------- ----------------
------------------- ----------------
------------------- ----------------
---------
------
-----------
--------
------ ------- -
------ -
------ -
------------- -
--------- -
------ -----
--------------------- ------
--
----------- -
--- ---------------------
---------- -----
--
----------- -
------- ----------------------
------- ----------------------
--
--
--
--
--
---------
------ -------
-- -------- --
------------------ -
--------- ---------
------- -----
----- ----
---------- -----------------
-
--------延伸学习
如果您需要对 vue2-swiper 进行深入学习，可以参考官方文档 vue-swiper 。
此外，如果您要开发一个 Vue.js 项目，您可以参考 Vue.js 中文文档 了解更多相关知识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005665281e8991b448e2769