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 相关文章推荐
实用javaScript技术-屏蔽类
Aug 15 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
Feb 02 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
jquery不常用方法汇总
Jul 26 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
js window对象属性和方法相关资料整理
Nov 11 Javascript
AngularJS 简单应用实例
Jul 28 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 Javascript
Vue Components 数字键盘的实现
Sep 18 Javascript
JavaScript中的null和undefined用法解析
Sep 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之curl设置超时实例
2014/11/03 PHP
thinkphp备份数据库的方法分享
2015/01/04 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
浅谈PHP的反射机制
2016/12/15 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
jquery ajax abort()的使用方法
2010/10/28 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
2016/04/15 Javascript
JS使用onerror捕获异常示例
2016/08/03 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
关于angular引入ng-zorro的问题浅析
2020/09/09 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
gearman的安装启动及python API使用实例
2014/07/08 Python
python的random模块及加权随机算法的python实现方法
2017/01/04 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
python 读取二进制 显示图片案例
2020/04/24 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
戛纳奢侈品商店:Jacques Loup法国
2019/11/04 全球购物
英国自行车商店:AW Cycles
2021/02/24 全球购物
家长对学生的评语
2014/04/18 职场文书
群众路线教育实践活动调研报告
2014/11/03 职场文书
白银帝国观后感
2015/06/17 职场文书
《卖火柴的小女孩》教学反思
2016/02/19 职场文书
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python
Pandas自定义选项option设置
2021/07/25 Python
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python