js滑动轮播图,vue页面轮播
本文主要介绍vue.js项目中使用原生js的移动终端轮播地图。有需要的朋友可以借鉴一下，希望能有所帮助。祝大家进步很大，早日升职加薪。
目录
前言1。了解原生js移动终端2的事件。轮播图实战第一部分：模板template的解读第一部分：脚本标签中代码的解读第二部分：css样式的解读第三部分。渲染的结论
前言
今天在vue.js项目的实际开发过程中，遇到了实现轮播效果的问题。因为我不想因为一个轮播就引用整个jquery，而且我也发现我根本不了解移动端的一些事件，所以我做了一些资料搜索，终于解决了这个问题。接下来，我想和大家分享一下我解决问题的过程。
一、了解原生js移动端的事件
原生js mobile上有四种事件：
动作触摸开始手指放在屏幕上触发触摸移动手指在屏幕上移动触发(高频触发)触摸结束手指离开屏幕触发触摸取消系统取消触摸事件。每个事件被触发后，都会返回一个事件参数，其中包含三个触摸列表，分别是：
事件中的触摸列表内容触摸屏幕上的所有手指列表目标触摸当前DOM中的手指列表更改触摸是指当前事件的手指列表(尝试在本例中使用)。触摸列表中的每一个触摸对象(也就是每一根手指)都对应着触摸时产生的一些信息(只写了一部分)。
触摸信息含义clientX/clientY触摸点相对于浏览器的位置pageX/pageY触摸点相对于屏幕的位置页面摘要X/screenY触摸点相对于屏幕的位置：我们可以使用参数event.changedTouches[0]。获取触发触摸事件的手指(changedTouches[0])相对于页面(pageX
二、轮播图实战
我们只使用carousel函数中的前三个触发事件。我们来看看具体的应用。
因为vue.js项目都是以组件的形式开发的，所以我在这里以一个组件的形式展示。有问题可以留言问。
第一部分：template模板
模板
div class= continue play _ box @ touch start= touch start @ touch move= touch move @ touch end= touch end
div class=items_box
标题中的div v-for=(item，index :key= index
a:href= item . link rel= external no follow
img :src=item.image alt=
/a
/div
/div
div class=points_box
div class=points
长度:key= index :class= { current:index==current img } /div
/div
/div
/div
/模板
第一部分解读：
1.class= continue play _ box 的div标签作为组件模板中的根标签来包装内部标签(知识点：如果一个组件中有多个标签在同一级别，则必须用一个标签包装)，同时也用于设置overflow:hidden样式来隐藏未播放的转盘。
2.具有class= items _ box 的div标记是具有内部class= slide 的div标记的父标记，该标记用于打开flex布局。这个标签的主要内容是轮播图片。
3.带有class="slide "的div标签用v-for指令遍历父组件传入的数据横幅并输出它。
4.带有class= points 的div标记是带有internal class=each_point 的div标记的父标记，它用于打开flex布局，以便圆盘传送带底部和中间的点有序排列。这个标签的主要内容是转盘底部和中间的进度条上的点。
第二部分：script标签内代码
脚本
导出默认值{
名称：“继续播放”，
Props:[banners]，//接受来自父组件的横幅数据
data(){
返回{
Bannerwidth: 0，//轮播宽度
StartPoint: 0，//触摸起点的横坐标
端点：0，//触摸终点的横坐标。
Movelength: 0，//起点和终点之差
当前值：0,//当前轮播图的索引
isPlaying: true，//判断是否处于自动轮播
playTimer: null //轮播定时器
}
},
方法：{
触摸开始(事件){
//停止轮播
clearInterval(this.playTimer)
//获取触摸的开始点
这个起点=事件。已更改触摸[0].pageX
},
触摸移动（事件){
//获取触摸的结束点
这个端点=事件。已更改触摸[0].pageX
this.slidings()
},
TouchEnd(){
这个。跳转()
//开始轮播
this.startPlay()
},
//Jump()方法用于处理滑动到一定程度后松手自动跳转到下一页或上一页
Jump(){
const current img=文档。getelementsbyclassname( slide )
//滑动超过轮播图宽度的百分之40,则跳转下一张，否则不跳转
如果（这个MoveLength 0 this .CurrentImg！==this.banners.length-1){
如果（这个MoveLength this。横幅宽度* 0.4){
这个。当前
当前img[0]。风格。左边距=-this .CurrentImg * this.bannerwidth px
}
否则{
当前img[0]。风格。左边距=-this .CurrentImg * this.bannerwidth px
}
}
else if(这个MoveLength 0 this .CurrentImg！==0){
如果(-这个MoveLength this。横幅宽度* 0.4){
这个。当前
当前img[0]。风格。左边距=-this .CurrentImg * this.bannerwidth px
}
否则{
当前img[0]。风格。左边距=-this .CurrentImg * this.bannerwidth px
}
}
},
//slidings()方法用于处理在滑动过程中，轮播图跟着手指滑动的距离移动
slidings(){
//判断是点击还是滑动
如果（这个100 . start point===这个。端点){return}
这个MoveLength=this .起点-这个。端点
//操作多姆，获取轮播图对象标签
const current img=文档。getelementsbyclassname( slide )
//获取轮播图的宽度
this.bannerwidth=currentimg[0].偏移距离
//判断是否超出滑动范围，即第一页无法再往前一页滑动，最后一页无法再往后一页滑动
如果（这个MoveLength 0 this .CurrentImg！==this.banners.length-1){
当前img[0]。风格。左边距=-this .移动长度-这个CurrentImg * this.bannerwidth px
}
else if(这个MoveLength 0 this .CurrentImg！==0){
当前img[0]。风格。左边距=-this .移动长度-这个CurrentImg * this.bannerwidth px
}
},
//开启轮播
startPlay() {
clearInterval(this.playTimer)
这个。play timer=setInterval(()={
如果（这个CurrentImg===3) {
这个当前mg=-1
}
这个。当前
const current img=文档。getelementsbyclassname( slide )
this.bannerwidth=currentimg[0].偏移距离
当前img[0]。风格。左边距=-this .CurrentImg * this.bannerwidth px
当前img[0]。风格。transition=全1s ease
}, 3000)
}
},
已安装(){
//页面挂在完毕自动开启轮播
this.startPlay()
}
}
/脚本
第二部分解读：
1.在组件数据属性中，初始化了几个变量：起点（触摸开始点横坐标)、端点（触摸结束时横坐标)、移动长度（移动的长度（有正负))、当前值（当前轮播图索引)
2.在页面挂在完成后，触发方法中的开始播放方法，开启轮播功能
3.在触摸事件中主要运用起点-终点的值使得图片跟着手指的滑动方向同步移动，并且在触摸开始时，关闭自动轮播定时器，在触摸结束后，自动开启轮播定时器
4.在松手后，通过跳转()方法进行跳转上下页图片
第三部分：css样式部分
样式范围。继续播放_框{
溢出：隐藏；
位置：相对；
}。继续播放_框。items_box{
显示器：flex
}。继续播放_框。幻灯片{
伸缩：0；
宽度：100%；
}。继续播放_框。幻灯片img，继续播放_框。幻灯片a{
宽度：100%；
身高：100%；
}。points_box{
显示器：flex
justify-content:居中；
}。积分{
显示器：flex
宽度：33%；
高度：10px
位置：绝对；
底部：8px
对齐-内容：空间-均匀；
}。分。每个点{
宽度：8px
高度：8px
边框半径：8px
背景：# fff
不透明度：0.7；
}。分。当前{
背景：# ff0031
}
/风格
css样式我就不多解释了，因为比较抽象。你可以按照我的代码调试优化，我的应该不是最好的。
三、效果图
这张gif图展示了我现在开发的一些项目效果图，包括本文提到的轮播功能。
结束语
020.05.01这是我在vue.js实战项目开发第二天遇到的问题希望遇到的问题能帮到你。有兴趣可以关注一波，每天和大家分享一些问题和解决方法。你也可以和我分享你的经历。
更多关于原生js移动轮播的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。