vue.js中怎么使用原生js实现移动端的轮播图(JS,vue.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模板

<template><divclass="ContinuPlay_box"@touchstart="TouchStart"@touchmove="TouchMove"@touchend="TouchEnd"><divclass="items_box"><divv-for="(item,index)inbanners"class="slide":key="index"><a:href="item.link"rel="externalnofollow"><img:src="item.image"alt=""></a></div></div><divclass="points_box"><divclass="points"><divclass="each_point"v-for="(item,index)inbanners.length":key="index":class="{current:index==CurrentImg}"></div></div></div></div></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标签内代码

<script>exportdefault{name:"ContinuPlay",props:['banners'],//接受父级组件传过来的banners数据data(){return{bannerwidth:0,//轮播图宽度StartPoint:0,//触摸开始的点的横坐标EndPoint:0,//触摸结束的点的横坐标MoveLength:0,//StartPoint与EndPoint的差值CurrentImg:0,//当前轮播图的索引isPlaying:true,//判断是否处于自动轮播playTimer:null//轮播定时器}},methods:{TouchStart(event){ //停止轮播clearInterval(this.playTimer)//获取触摸的开始点this.StartPoint=event.changedTouches[0].pageX},TouchMove(event){//获取触摸的结束点this.EndPoint=event.changedTouches[0].pageXthis.slidings()},TouchEnd(){this.Jump()//开始轮播this.startPlay()},//Jump()方法用于处理滑动到一定程度后松手自动跳转到下一页或上一页Jump(){constcurrentimg=document.getElementsByClassName('slide')//滑动超过轮播图宽度的百分之40，则跳转下一张，否则不跳转if(this.MoveLength>0&&this.CurrentImg!==this.banners.length-1){if(this.MoveLength>this.bannerwidth*0.4){this.CurrentImg++currentimg[0].style.marginLeft=-this.CurrentImg*this.bannerwidth+'px'}else{currentimg[0].style.marginLeft=-this.CurrentImg*this.bannerwidth+'px'}}elseif(this.MoveLength<0&&this.CurrentImg!==0){if(-this.MoveLength>this.bannerwidth*0.4){this.CurrentImg--currentimg[0].style.marginLeft=-this.CurrentImg*this.bannerwidth+'px'}else{currentimg[0].style.marginLeft=-this.CurrentImg*this.bannerwidth+'px'}}},//slidings()方法用于处理在滑动过程中，轮播图跟着手指滑动的距离移动slidings(){//判断是点击还是滑动if(this.StartPoint===this.EndPoint){return}this.MoveLength=this.StartPoint-this.EndPoint//操作DOM，获取轮播图对象标签constcurrentimg=document.getElementsByClassName('slide')//获取轮播图的宽度this.bannerwidth=currentimg[0].offsetWidth//判断是否超出滑动范围，即第一页无法再往前一页滑动，最后一页无法再往后一页滑动if(this.MoveLength>0&&this.CurrentImg!==this.banners.length-1){currentimg[0].style.marginLeft=-this.MoveLength-this.CurrentImg*this.bannerwidth+'px'}elseif(this.MoveLength<0&&this.CurrentImg!==0){currentimg[0].style.marginLeft=-this.MoveLength-this.CurrentImg*this.bannerwidth+'px'}},//开启轮播startPlay(){clearInterval(this.playTimer)this.playTimer=setInterval(()=>{if(this.CurrentImg===3){this.CurrentImg=-1}this.CurrentImg++constcurrentimg=document.getElementsByClassName('slide')this.bannerwidth=currentimg[0].offsetWidthcurrentimg[0].style.marginLeft=-this.CurrentImg*this.bannerwidth+'px'currentimg[0].style.transition='all1sease'},3000)}},mounted(){ //页面挂在完毕自动开启轮播 this.startPlay()}}</script>

第二部分解读：

1.在组件data属性中，初始化了几个变量：StartPoint(触摸开始点横坐标)、EndPoint(触摸结束时横坐标)、MoveLength(移动的长度（有正负）)、CurrentImg(当前轮播图索引)

2.在页面挂在完成后， 触发methods中的startPlay方法，开启轮播功能

3.在触摸事件中主要运用 StartPoint - EndPoint 的值使得图片跟着手指的滑动方向同步移动， 并且在触摸开始时，关闭自动轮播定时器，在触摸结束后，自动开启轮播定时器

4.在松手后，通过Jump() 方法进行跳转上下页图片

第三部分：css样式部分

<stylescoped>.ContinuPlay_box{overflow:hidden;position:relative;}.ContinuPlay_box.items_box{display:flex;}.ContinuPlay_box.slide{flex-shrink:0;width:100%;}.ContinuPlay_box.slideimg,.ContinuPlay_box.slidea{width:100%;height:100%;}.points_box{display:flex;justify-content:center;}.points{display:flex;width:33%;height:10px;position:absolute;bottom:8px;justify-content:space-evenly;}.points.each_point{width:8px;height:8px;border-radius:8px;background:#fff;opacity:0.7;}.points.current{background:#ff0031;}</style>

css样式就不做多解释了，因为这比较抽象，你们可以根据我的代码进行调试优化，我的应该也不是最好的

三、效果图

此gif图展示的是我现在已经开发的部分项目效果图，其中包括本文讲的轮播图功能

 </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">