vue swipe自定义组件实现轮播效果
(编辑:jimmy 日期: 2024/11/5 浏览:3 次 )
本文实例为大家分享了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" :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 "(")[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 "htmlcode">.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>效果图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:监控Nodejs的性能实例代码