vue swipe自定义组件实现轮播效果


Posted in Javascript onJuly 03, 2019

本文实例为大家分享了vue swipe自定义组件实现轮播效果的具体代码,供大家参考,具体内容如下

<template>

 <layout-div :style="getStyle" class="over-h posi-r">
 <layout-div :style="getChildStyle" class="flex" @load="loadHandle">
  <slot/>
 </layout-div>
 <layout-div class="flex-center flex posi-a b0 l0 r0" :height="40" :unit="unit" v-if="!$slots.point">
  <layout-div class="flex">
  <layout-div v-for="i in this.length" :key="i" class="op-5" :mar="[0,15]" :height="20" :width="20"
    :bg="Math.abs(index) == i-1?'red':'#fff'" :fillet="20" :unit="unit"/>
  </layout-div>
 </layout-div>
 <slot v-else name="point"/>
 </layout-div>

</template>
<script>
 export default {
 props: {
  value: {
  type: Number,
  default: 0
  },
  width: { //宽
  type: Number,
  default: null
  },
  height: { //高
  type: Number,
  default: null,
  },
  unit: { //单位
  type: String,
  default: 'px'
  },
  time: { //时间(毫秒)
  type: Number,
  default: 3000
  },
  direction: { //方向 X | Y (注意是:大写)
  type: String,
  default: "X"
  },
  duration: { //每次切换的时间(毫秒)
  type: Number,
  default: 300
  },
  autoPlay: { //是否自动轮播
  type: Boolean,
  default: true
  }
 },
 data() {
  return {
  style: {},
  multiple: 50, //倍数处理,更加UI进行 100倍是按照 750*1334 的UI
  dom: null,  //当前swipe元素
  length: 0, //子元素的数量
  countWidth: 0, //总长度
  index: 0,
  isTouch: false,// 手指是否在屏幕上
  }
 },
 methods: {
  loadHandle(e) {
  this.dom = e.dom
  this.length = e.dom.childElementCount
  for (let i = 0; i < this.length; i++) {
   this.dom.children[i].style.height = this.height ? this.height / this.multiple + this.unit : ''
   this.dom.children[i].style.width = parseFloat(this.dom.style.width) / this.length / this.multiple + this.unit
   this.dom.children[i].style.flexGrow = 1;
  }
  this.bingTouch(this.dom)
  // 判断可不可以自动轮播
  if (this.autoPlay && this.length) this.beginSwipe()
  },
  bingTouch(dom) {
  const self = this;
  let tranX = 0
  this.touch({
   stop: false,
   dom,
   start(e) {
   dom.style.transitionDuration = '0ms'
   tranX = parseFloat(dom.style.transform.split("(")[1]) || 0
   },
   move({dx}) {
   dom.style.transform = `translateX(${dx + tranX + self.unit})`;
   },
   change({direction}) {
   switch (direction) {
    case 'left':
    self.index--;
    break;
   }
   self.moveHandle()
   }
  })
  },
  moveHandle() {  //移动
  const Y = parseFloat(this.dom.style.width) / this.length
  this.dom.style.transitionDuration = `${this.duration}ms`
  this.dom.style.transform = `translateX(${this.index * Y + this.unit})`;
  setTimeout(() => {
   if (!this.isTouch) {
   if (Math.abs(this.index) == this.length - 1) {
    // console.log("要开始调换位置了");
    const first = this.dom.firstChild;
    first.style.transform = `translateX(${(Math.abs(-this.index) + 1) * Y + this.unit})`;
   } else if (Math.abs(this.index) == this.length) {
    // console.log("开始下一轮了")
    const first = this.dom.firstChild;
    this.dom.style.transitionDuration = '0ms'
    this.dom.style.transform = `translateX(${0 + this.unit})`;
    this.index = 0;
    first.style.transform = `translateX(${0 + this.unit})`;
   }
   }
   this.$emit('input', Math.abs(this.index))
  }, this.duration)
  },
  beginSwipe() {
  setTimeout(() => {
   if (this.isTouch) return this.beginSwipe(); //如果是手指在移动,就不再执行
   this.index--
   this.moveHandle()
   this.beginSwipe()
  }, this.time > this.duration ? this.time : this.duration + 1000)
  }
 },
 computed: {
  getStyle() {
  if (this.unit != 'rem') this.multiple = 1;
  const width = this.width ? this.width / this.multiple + this.unit : '100%',
   height = this.height ? this.height / this.multiple + this.unit : ''
  return {width, height};
  },
  getChildStyle() {
  if (this.unit != 'rem') this.multiple = 1;
  this.countWidth = ((this.width || this.dom ? this.dom.parentNode.clientWidth : window.screen.width) / this.multiple * this.length)
  this.style.width = this.countWidth + this.unit
  if (this.height) {
   this.style.height = this.height / this.multiple + this.unit
  } else {
   this.style.height = ''
  }
  return this.style;
  }
 }
 }

</script>

class - style 具体内容如下

css 参考的 UI设计尺寸为 750*1334

.over-h {
 overflow: hidden;
}
.posi-r {
 position: relative;
 z-index: 0;
}
.flex {
 display: flex;
}
.flex-center {
 justify-content: center;
 align-items: center;
}
.posi-a {
 position: absolute;
 z-index: 0;
}
.b0 {
 bottom: 0;
}

.l0 {
 left: 0;
}
.r0 {
 right: 0;
}
.op-5 {
 opacity: 0.5
}
.font-68 {
 font-size: 0.68rem;
}
.col-f {
 color: #fff;
}

示例代码

<layout-swipe :height="240" :time="2000" unit="rem">
  <layout-div bg="red" class="flex-center flex font-68 col-f">1</layout-div>
  <layout-div bg="yellow" class="flex-center flex font-68 col-f">2</layout-div>
  <layout-div bg="green" class="flex-center flex font-68 col-f">3</layout-div>
 </layout-swipe>

效果图

vue swipe自定义组件实现轮播效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
基于jQuery的公告无限循环滚动实现代码
May 11 Javascript
Node.js的特点和应用场景介绍
Nov 04 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
BootStrap创建响应式导航条实例代码
May 31 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
vue.js 微信支付前端代码分享
Feb 10 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
Vue.js中的组件系统
May 30 Javascript
20个必会的JavaScript面试题(小结)
Jul 02 #Javascript
微信小程序如何调用新闻接口实现列表循环
Jul 02 #Javascript
Angular.JS读取数据库数据调用完整实例
Jul 02 #Javascript
js实现for循环跳过undefined值示例
Jul 02 #Javascript
Vue的路由及路由钩子函数的实现
Jul 02 #Javascript
Node.js 实现远程桌面监控的方法步骤
Jul 02 #Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 #Javascript
You might like
php下HTTP Response中的Chunked编码实现方法
2008/11/19 PHP
php dirname(__FILE__) 获取当前文件的绝对路径
2011/06/28 PHP
比较discuz和ecshop的截取字符串函数php版
2012/09/03 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
PHP的Socket网络编程入门指引
2015/08/11 PHP
Laravel 加载第三方类库的方法
2018/04/20 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
jQuery实现网站添加高亮突出显示效果的方法
2015/06/26 Javascript
jquery自定义表格样式
2015/11/23 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
javascript中BOM基础知识总结
2017/02/14 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
js实现一个页面多个倒计时的3种方法
2019/02/25 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
Python中对列表排序实例
2015/01/04 Python
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
Python创建字典的八种方式
2019/02/27 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
中学教师实习自我鉴定
2013/09/28 职场文书
小学亲子活动总结
2014/07/01 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
2015暑假假期总结
2015/07/13 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书