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实现图片裁剪后上传
Dec 16 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
vue+openlayers绘制省市边界线
Dec 24 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
vue 数据双向绑定的实现方法
Mar 04 Vue.js
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
Vue如何清空对象
Mar 03 Vue.js
vue实现拖拽交换位置
Apr 07 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&amp;&amp;mysql)二
2006/10/09 PHP
解析用PHP读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
php递归创建目录的方法
2015/02/02 PHP
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
vue中添加与删除关键字搜索功能
2019/10/12 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
微信小程序个人中心的列表控件实现代码
2020/04/26 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
python打开文件并获取文件相关属性的方法
2015/04/23 Python
Python 含参构造函数实例详解
2017/05/25 Python
破解安装Pycharm的方法
2018/10/19 Python
python代码编写计算器小程序
2020/03/30 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
Python 私有化操作实例分析
2019/11/21 Python
pandas 对group进行聚合的例子
2019/12/27 Python
Python读取csv文件实例解析
2019/12/30 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
情况说明书格式范文
2014/05/06 职场文书
应聘会计求职信
2014/06/11 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript
科普 | 业余无线电知识-波段篇
2022/02/18 无线电