首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

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

    Vue.js项目中封装轮播图组件 前言 一、了解原生js移动端的事件 二、轮播图实战 三、效果图 结束语 前言 今天我在vue.js项目实战开发过程中遇到了实现轮播图效果的问题,因为不想因为一个轮播图而引用整个...: 事件 作用 touchstart 手指放到屏幕上触发 touchmove 手指在屏幕上移动触发(高频触发) touchend 手指离开屏幕触发 touchcancel 系统取消touch事件时触发...,轮播图跟着手指滑动的距离移动 slidings(){ //判断是点击还是滑动 if(this.StartPoint === this.EndPoint){return...document.getElementsByClassName('slide') //获取轮播图的宽度 this.bannerwidth = currentimg[0].offsetWidth //判断是否超出滑动范围...CurrentImg(当前轮播图索引) 在页面挂在完成后, 触发methods中的startPlay方法,开启轮播功能 在触摸事件中主要运用 StartPoint - EndPoint 的值使得图片跟着手指滑动方向同步移动

    9.1K20
    领券