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代码超级推荐
Apr 05 Javascript
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
JavaScript 学习笔记之操作符(续)
Jan 14 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
聊一聊JavaScript作用域和作用域链
May 03 Javascript
jquery表单验证插件validation使用方法详解
Jan 20 Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 Javascript
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
javascript关于“时间”的一次探索
Jul 24 Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
关于React Native 无法链接模拟器的问题
Jun 21 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
基于mysql的论坛(5)
2006/10/09 PHP
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
javascript 支持链式调用的异步调用框架Async.Operation
2009/08/04 Javascript
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
详解JavaScript 作用域
2020/07/14 Javascript
python实现输入数字的连续加减方法
2018/06/22 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
基于python中theano库的线性回归
2018/08/31 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
Windows下pycharm创建Django 项目(虚拟环境)过程解析
2019/09/16 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
python使用建议与技巧分享(一)
2020/08/17 Python
浅谈Python __init__.py的作用
2020/10/28 Python
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
招商业务员岗位职责
2013/12/16 职场文书
大学生饮食连锁店创业计划书
2014/01/17 职场文书
秋季运动会稿件
2014/01/30 职场文书
书香校园活动方案
2014/02/28 职场文书
办公自动化毕业生求职信
2014/03/09 职场文书
《月球之谜》教学反思
2014/04/10 职场文书
商务助理求职信范文
2014/04/20 职场文书
邓小平理论心得体会
2014/09/09 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
2014年党员整改措施
2014/10/24 职场文书