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 相关文章推荐
用roll.js实现的图片自动滚动+鼠标触动的特效
Mar 18 Javascript
jQuery插件 tabBox实现代码
Feb 09 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
Jan 31 Javascript
javascript的事件触发器介绍的实现
Jun 05 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 Javascript
vue-cli3 取消eslint校验代码的解决办法
Jan 16 Javascript
vue-列表下详情的展开与折叠案例
Jul 28 Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 Javascript
使用JS实现简易计算器
Jun 14 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
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
php 批量添加多行文本框textarea一行一个
2014/06/03 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
初识PHP中的Swoole
2016/04/05 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
vue的for循环使用方法
2019/02/12 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
python实现简单socket通信的方法
2016/04/19 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
Python使用combinations实现排列组合的方法
2018/11/13 Python
pygame游戏之旅 添加游戏暂停功能
2018/11/21 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
python下载微信公众号相关文章
2019/02/26 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
拾金不昧通报表扬范文
2015/05/05 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书
《弟子规》读后感:知廉耻、明是非、懂荣辱、辨善恶
2019/12/03 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers