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

本文实例为大家分享了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>

效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。