vue.js项目使用原生js实现移动端的轮播图

目录

• 前言
• 一、了解原生js移动端的事件
• 二、轮播图实战
• 第一部分：template模板
• 第一部分解读：
• 第二部分：script标签内代码
• 第二部分解读：
• 第三部分：css样式部分
• 三、效果图
• 结束语

前言

今天我在vue.js项目实战开发过程中遇到了实现轮播图效果的问题，因为不想因为一个轮播图而引用整个jquery，而且我还发现自己根本就不清楚移动端的一些事件，所以我就进行了一些资料查找，并最终解决了这个问题，接下来跟大家分享一下我的解决问题的过程.

一、了解原生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图展示的是我现在已经开发的部分项目效果图，其中包括本文讲的轮播图功能

结束语

2020.05.01 这是我在vue.js实战项目开发第二天中遇到的问题，希望我遇到的问题能对大家有所帮助， 如果大家感兴趣，可以关注一波，每天跟大家分享一些问题和解决办法，大家也可以跟我分享一下你们的经验。

更多关于原生js移动端轮播图的资料请关注脚本之家其它相关文章！