基于Vue.js的移动端3×3上下左右四个方向可手指滑动的轮播图

介绍

轮播图并不陌生，基于Vue.js的很多UI库基本都支持轮播，但基本是横向或者纵向，甚至无法在手机端用手指滑动控制，本文解决的就是这两个问题。

效果图

实现过程

准备工作：

1，安装vue-touch插件：npm install vue-touch@next --save（默认vue中没有手指滑动操作的方法，所以需要引入此插件。安装失败可以尝试cnpm国内镜像）

2，安装成功后在main.js中引入：

import VueTouch from 'vue-touch'
Vue.use(VueTouch, {
  name: 'v-touch'
})

源代码：

手机测试：

1，修改项目中的config/index.js文件（将本地主机改为自己的IP地址）：

2，利用草料二维码生成器将当前页面地址生成二维码

3，保证手机与电脑处于同一局域网下打开微信或QQ扫一扫查看效果（手机浏览器不可访问暂不知原因）

说明：

1，看不懂代码的可以看看Vue官网对动画过渡的说明

2，暂时还没有做自动播放以及位置小指示器的功能

3，切换效果可能有时候感觉并非是十足的无缝连接，九个位置风格保持一致，背景色一致一般就看不出来了