站长资源网络编程
vue swipe自定义组件实现轮播效果
简介本文实例为大家分享了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" :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>
效果图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇：8 个有用的JS技巧(推荐)
下一篇：监控Nodejs的性能实例代码