简介
vue-page-swipe 是一个基于 Vue.js 的移动端轮播组件。它能够满足移动端轮播图的基本需求，支持手动滑动、自动播放、无限循环、懒加载等功能。
安装
vue-page-swipe 依赖 vue 和 hammerjs，所以在安装之前需要先安装这两个依赖：
--- ------- --- --------
然后可以通过以下命令安装 vue-page-swipe：
--- ------- --------------
使用方法
引入组件
在使用 vue-page-swipe 之前，需要在 Vue 组件中引入它。可以使用以下语句：
------ --------- ---- ----------------
基本用法
vue-page-swipe 的基本用法非常简单，只需要在组件中使用 <page-swipe> 标签即可：
------------ ------------ ------------ ------------ -------------
其中，<page-swipe> 标签中所包含的子元素就是轮播图的每一个页面。在这个例子中，总共有三个页面，分别是包含数字 1、2、3 的 <div> 元素。
参数
vue-page-swipe 可以通过传入不同的参数来设置不同的轮播效果。以下是一些常用的参数：
autoplay：轮播是否自动播放，默认为false；interval：自动播放时轮播间隔时间，默认为3000（单位为毫秒）；continuous：是否开启无限循环模式，默认为true；loop：是否在首尾循环滚动时禁用默认回弹动画（用于实现 iOS 上与安卓上滚动效果的一致性），默认为false；vertical：是否纵向滚动，默认为false；showIndicator：是否显示轮播指示器，默认为false；lazyload：是否开启懒加载图片功能，默认为false；preloadImages：预加载图片的数量，默认为1；threshold：拖动页面时的最小阈值（距离），超过这个阈值才会视为有效的拖动操作，默认为20（单位为像素）；speed：动画速度（即页面切换的时间），默认为300毫秒。
事件
vue-page-swipe 也提供了一些事件供开发者使用。以下是一些常用的事件：
change：每次页面切换完成后会触发一次该事件。事件的回调函数会接收一个参数index，表示当前显示的页面的索引（从零开始计数）；scrollStart：当手指触摸屏幕并开始滑动时触发，回调函数不接受参数；scrollEnd：当滑动操作结束时触发，回调函数不接受参数；scrollCancel：当滑动操作取消时触发，回调函数不接收参数；lazyload：当懒加载图片时触发，回调函数会接收一个参数image，表示当次加载的图片的 DOM 元素。
示例代码
----------
-----------
-------------------
---------------------
----------------
----------------------
--------------------------------
----------------------------
----------------------------------
--------------------------
-
--------- ------------------------------------------------- -------------
--------- -------------------------------------------------- -------------
--------- -------------------------------------------------- -------------
-------------
-----------
--------
------ --------- ---- ----------------
------ ------- -
----------- -
---------
--
-------- -
------------------- -
-------------------- -------- ------
--
------------------- -
------------------- ----------
--
----------------- -
------------------- --------
--
-------------------- -
------------------- -----------
--
--------------------- -
--------- - ------------------------------
-
-
-
---------
------ -------
---------------------- -
------- -----
-
--------总结
vue-page-swipe 是一个功能齐全、易于使用的移动端轮播组件。通过本文的介绍，您应该已经掌握了它的基本使用方法和常用参数和事件，希望这能够对您开发移动端应用有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055e8d81e8991b448dbe86