vue.js中怎么使用原生js实现移动端的轮播图
这篇文章主要介绍"vue.js中怎么使用原生js实现移动端的轮播图"，在日常操作中，相信很多人在vue.js中怎么使用原生js实现移动端的轮播图问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"vue.js中怎么使用原生js实现移动端的轮播图"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
一、了解原生js移动端的事件
原生js移动端的事件一共有四种：
| 事件 | 作用 |
|---|---|
| touchstart | 手指放到屏幕上触发 |
| touchmove | 手指在屏幕上移动触发（高频触发） |
| touchend | 手指离开屏幕触发 |
| touchcancel | 系统取消touch事件时触发 |
在每个事件被触发后，会返回一个event参数，event里面包含着三个触摸列表，即：
| event中的触摸列表 | 内容 |
|---|---|
| touches | 屏幕上所有的手指列表 |
| targetTouches | 当前这个DOM中的手指列表 |
| changedTouches | 涉及当前事件的手指列表（本实例中尽量用这个） |
触摸列表中每个触摸对象（即每个手指）都对应着一些触摸时生成的信息(只写了部分)
| 触摸信息 | 含义 |
|---|---|
| clientX / clientY | 触摸点相对于浏览器的位置 |
| pageX / pageY | 触摸点相对于页面的位置 |
| screenX / screenY | 触摸点相对于屏幕的位置 |
总结：我们可以用触摸事件传入的参数event.changedTouches[0].pageX 获得我们触发( event )触摸事件那个手指( changedTouches[0] )当前位置相对于页面的位置( pageX )
二、轮播图实战
我们做的轮播图功能中只用到前三种触发事件，我们来看一下具体的应用。
因为vue.js项目中都是以组件的形式来开发的，所以我这里就以一个组件的形式来展示，有疑问的可以留言询问。
第一部分：template模板
第一部分解读：
1.class="ContinuPlay_box"的div标签作为组件模板里的根标签包裹内部标签（知识点：组件内如果多个标签处于同级，必须用一个标签将他们包裹起来），也用于设置overflow:hidden样式，用来隐藏未播放的轮播图
2.class="items_box"的div标签作为内部class="slide" 的div标签的父标签，用来开启flex布局，该标签内主要内容就是轮播图图片
3.class="slide" 的div标签用v-for指令对父组件传进来的数据banners进行遍历并输出
4.class="points"的div标签作为内部class="each_point"的div标签的父标签，用来开启flex布局，让轮播图的中下方的小圆点有序排列，该标签内部主要内容就是轮播图中间下方的进度条小圆点
第二部分：script标签内代码
第二部分解读：
1.在组件data属性中，初始化了几个变量：StartPoint(触摸开始点横坐标)、EndPoint(触摸结束时横坐标)、MoveLength(移动的长度（有正负）)、CurrentImg(当前轮播图索引)
2.在页面挂在完成后， 触发methods中的startPlay方法，开启轮播功能
3.在触摸事件中主要运用 StartPoint - EndPoint 的值使得图片跟着手指的滑动方向同步移动， 并且在触摸开始时，关闭自动轮播定时器，在触摸结束后，自动开启轮播定时器
4.在松手后，通过Jump() 方法进行跳转上下页图片
第三部分：css样式部分
css样式就不做多解释了，因为这比较抽象，你们可以根据我的代码进行调试优化，我的应该也不是最好的
三、效果图
此gif图展示的是我现在已经开发的部分项目效果图，其中包括本文讲的轮播图功能
到此，关于"vue.js中怎么使用原生js实现移动端的轮播图"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！
