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

更新时间：2020-09-02 17:18:01 作者：startmvc

本文实例为大家分享了vueswipe自定义组件实现轮播效果的具体代码，供大家参考，具体内容

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

效果图