如何解决这个vue组件如何绑定它的样式
<template>
<div id="hy-swiper">
<div class="swiper" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
<slot></slot>
</div>
<slot name="indicator">
</slot>
<div class="indicator">
<slot name="indicator" v-if="showIndicator && slideCount>1">
<div v-for="(item,index) in slideCount" class="indi-item" :class="{active: index === currentIndex-1}" :key="index"></div>
</slot>
</div>
</div>
</template>
<script>
export default {
name: "Swiper",props: {
interval: {
type: Number,default: 3000
},animDuration: {
type: Number,default: 300
},moveRatio: {
type: Number,default: 0.25
},showIndicator: {
type: Boolean,default: true
}
},data: function () {
return {
slideCount: 0,totalWidth: 0,swiperStyle: {},currentIndex: 1,scrolling: false,}
},mounted: function () {
setTimeout(() => {
this.handleDom();
this.startTimer();
},3000)
},methods: {
startTimer: function () {
this.playTimer = window.setInterval(() => {
this.currentIndex++;
this.scrollContent(-this.currentIndex * this.totalWidth);
},this.interval)
},stopTimer: function () {
window.clearInterval(this.playTimer);
},scrollContent: function (currentPosition) {
this.scrolling = true;
this.swiperStyle.transition ='transform '+ this.animDuration + 'ms';
this.setTransform(currentPosition);
this.checkPosition();
this.scrolling = false
},checkPosition: function () {
window.setTimeout(() => {
this.swiperStyle.transition = '0ms';
if (this.currentIndex >= this.slideCount + 1) {
this.currentIndex = 1;
this.setTransform(-this.currentIndex * this.totalWidth);
} else if (this.currentIndex <= 0) {
this.currentIndex = this.slideCount;
this.setTransform(-this.currentIndex * this.totalWidth);
}
this.$emit('transitionEnd',this.currentIndex-1);
},this.animDuration)
},setTransform: function (position) {
this.swiperStyle.transform = `translate3d(${position}px,0)`;
this.swiperStyle['-webkit-transform'] = `translate3d(${position}px),0`;
this.swiperStyle['-ms-transform'] = `translate3d(${position}px),0`;
},handleDom: function () {
let swiperEl = document.querySelector('.swiper');
let slidesEls = swiperEl.getElementsByClassName('slide');
this.slideCount = slidesEls.length;
if (this.slideCount > 1) {
let cloneFirst = slidesEls[0].cloneNode(true);
let cloneLast = slidesEls[this.slideCount - 1].cloneNode(true);
swiperEl.insertBefore(cloneLast,slidesEls[0]);
swiperEl.appendChild(cloneFirst);
this.totalWidth = swiperEl.offsetWidth;
this.swiperStyle = swiperEl.style;
}
this.setTransform(-this.totalWidth);
},touchStart: function (e) {
if (this.scrolling) return;
this.stopTimer();
this.startX = e.touches[0].pageX;
},touchMove: function (e) {
this.currentX = e.touches[0].pageX;
this.distance = this.currentX - this.startX;
let currentPosition = -this.currentIndex * this.totalWidth;
let moveDistance = this.distance + currentPosition;
this.setTransform(moveDistance);
},touchEnd: function (e) {
let currentMove = Math.abs(this.distance);
if (this.distance === 0) {
return
} else if (this.distance > 0 && currentMove > this.totalWidth * this.moveRatio) { // 右边移动超过0.5
this.currentIndex--
} else if (this.distance < 0 && currentMove > this.totalWidth * this.moveRatio) { // 向左移动超过0.5
this.currentIndex++
}
this.scrollContent(-this.currentIndex * this.totalWidth);
this.startTimer();
},previous: function () {
this.changeItem(-1);
},next: function () {
this.changeItem(1);
},changeItem: function (num) {
this.stopTimer();
this.currentIndex += num;
this.scrollContent(-this.currentIndex * this.totalWidth);
this.startTimer();
}
}
}
</script>
<style scoped>
//some css code
</style>
我正在处理 swiper 组件,我在 Internet 上获得了这些代码。
the html
我不明白内联样式是如何绑定的,而所有的过渡和变换都被赋予了 swiperStyle
中的 data(){}
,并且在 :
或 v-bind
中没有模板。有没有其他方法来绑定样式?我只是困惑它是如何工作的
谢谢你们
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。