vue.js 使用原生js实现轮播图


Posted in Vue.js onApril 26, 2022

前言

今天我在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模板

<template>
    <div class="ContinuPlay_box" @touchstart="TouchStart" @touchmove="TouchMove" @touchend="TouchEnd">
      <div class="items_box">
        <div v-for="(item, index) in banners" class="slide" :key="index">
          <a :href="item.link" rel="external nofollow" >
            <img :src="item.image" alt="">
          </a>
        </div>
      </div>
      <div class="points_box">
        <div class="points">
          <div class="each_point" v-for="(item, index) in banners.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>
  export default {
    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].pageX
        this.slidings()
      },
      TouchEnd(){
        this.Jump()
        //开始轮播
        this.startPlay()
      },
      //Jump()方法用于处理滑动到一定程度后松手自动跳转到下一页或上一页
      Jump(){
        const currentimg = 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'
          }
        }
        else if(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,获取轮播图对象标签
        const currentimg = 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'
        }
        else if(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 ++
            const currentimg = document.getElementsByClassName('slide')
            this.bannerwidth = currentimg[0].offsetWidth
            currentimg[0].style.marginLeft = -this.CurrentImg * this.bannerwidth + 'px'
            currentimg[0].style.transition = 'all 1s ease'
          }, 3000)
      }
    },
    mounted() {
    	//页面挂在完毕自动开启轮播
    	this.startPlay()
    }
  }
</script>

第二部分解读:

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

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

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

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

第三部分:css样式部分

<style scoped>
  .ContinuPlay_box{
    overflow: hidden;
    position: relative;
  }
  .ContinuPlay_box .items_box{
    display: flex;
  }
  .ContinuPlay_box .slide{
    flex-shrink: 0;
    width: 100%;
  }
  .ContinuPlay_box .slide img, .ContinuPlay_box .slide a{
    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图展示的是我现在已经开发的部分项目效果图,其中包括本文讲的轮播图功能

vue.js 使用原生js实现轮播图

结束语

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

Vue.js 相关文章推荐
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
vue在图片上传的时候压缩图片
Nov 18 Vue.js
vue中watch的用法汇总
Dec 28 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
解读Vue组件注册方式
May 15 Vue.js
vue基于Teleport实现Modal组件
May 31 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
vue3不同环境下实现配置代理
May 25 Vue.js
如何vue使用el-table遍历循环表头和表体数据
vue 把二维或多维数组转一维数组
Apr 24 #Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 #Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
vue @click.native 绑定原生点击事件
Apr 22 #Vue.js
vue实现省市区联动 element-china-area-data插件
vue修饰符.capture和.self的区别
Apr 22 #Vue.js
You might like
简要剖析PHP的Yii框架的组件化机制的基本知识
2016/03/17 PHP
PHP简单字符串过滤方法示例
2016/09/04 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
javascript之ESC(第二类混淆)
2007/05/06 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
2020/08/12 Javascript
Python删除空文件和空文件夹的方法
2015/07/14 Python
Python在不同目录下导入模块的实现方法
2017/10/27 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
python实现静态web服务器
2019/09/03 Python
Python 线程池用法简单示例
2019/10/02 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
Python函数基本使用原理详解
2020/03/19 Python
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
泰国第一在线超市:Tops
2021/02/13 全球购物
十岁生日同学答谢词
2014/01/19 职场文书
优秀毕业自我鉴定
2014/02/15 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
夫妻分居协议书范本
2014/11/28 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
开业典礼致辞
2015/07/29 职场文书
Java tomcat手动配置servlet详解
2021/11/27 Java/Android