<template>
|
<div class="auto-scroll-compontent" :style="{ width, height }">
|
<div class="auto-scroll-outer" ref="frame" id="frame"
|
:class="[dir === 'vertical' ? 'vertical-outer' : 'horizontal-outer']">
|
<div class="auto-scroll-wrapper" ref="wrapper" :key="refreshKey"
|
:class="[dir==='vertical'?'vertical-wrapper':'horizontal-wrapper']" :style="{
|
top: moveTop + 'px',
|
marginLeft: moveLeft + 'px',
|
transition: transition
|
}">
|
<slot></slot>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'autoScrollCompontent',
|
props: {
|
dir: {
|
type: String,
|
default: 'vertical' /* 方向值：水平-horizontal 竖-vertical */
|
},
|
width: {
|
type: String,
|
default: '100%'
|
},
|
height: {
|
type: String,
|
default: '100%'
|
},
|
stepSpeed: {
|
type: Number,
|
// default:500 /* 移动速度，单位 ms/100px */
|
default: 2000
|
},
|
wait: {
|
type: Number,
|
default: 3000 /* 单次动画结束后的等待时间，单位 ms */
|
},
|
hideSheB: {
|
type: Boolean
|
}
|
},
|
|
data() {
|
return {
|
$frame: null,
|
refreshKey: 0,
|
outerWidth: 0,
|
outerHeight: 0,
|
wrapperWidth: 0,
|
wrapperHeight: 0,
|
moveDistance: 0,
|
moveTop: 0,
|
moveLeft: 0,
|
transition: 'all 0',
|
interval: null,
|
roundTime: 0 /* 一个滚动周期需要的时间 */
|
}
|
},
|
mounted() {
|
this.$nextTick(() => {
|
this.init()
|
})
|
},
|
beforeDestroy() {
|
this.clearInterval();
|
this.destroyEleResize();
|
},
|
beforeUnmount(){
|
console.log('清除自动滚动的定时器')
|
this.clearInterval();
|
this.destroyEleResize();
|
},
|
methods: {
|
init() {
|
console.log('开启---定时自动滚动滚动')
|
// 自动滚动
|
this.moveTop = 0;
|
this.moveLeft = 0;
|
this.callSize()
|
this.createAnimation()
|
this.createEleResize()
|
},
|
/* 创建div宽高变化监听器 */
|
createEleResize() {
|
this.$frame = this.$refs.frame;
|
// 元素自适应
|
// this.$utils.eleResize.on(this.$refs.$frame, this.eleListener);
|
this.$utils.eleResize.on(document.getElementById("frame"), this.eleListener);
|
|
},
|
/* div宽高监听器监听事件 */
|
eleListener() {
|
this.moveTop = 0;
|
this.moveLeft = 0;
|
this.callSize();
|
this.clearInterval();
|
this.createAnimation();
|
},
|
/* 宽高计算 */
|
callSize() {
|
if (this.dir === 'vertical') {
|
this.outerHeight = this.$refs.frame.offsetHeight;
|
this.wrapperHeight = this.$refs.wrapper.offsetHeight;
|
if (this.wrapperHeight > this.outerHeight) {
|
this.moveDistance = this.wrapperHeight - this.outerHeight;
|
this.roundTime = Math.floor((this.moveDistance / 100) * this.stepSpeed)
|
this.transition = 'top ' + this.roundTime + 'ms linear'
|
}
|
} else {
|
this.outerWidth = this.$refs.frame.offsetWidth;
|
this.wrapperWidth = this.$refs.wrapper.scrollWidth;
|
if (this.wrapperWidth > this.outerWidth) {
|
this.moveDistance = this.wrapperWidth - this.outerWidth;
|
this.roundTime = Math.floor((this.moveDistance / 100) * this.stepSpeed)
|
this.transition = 'margin-left ' + this.roundTime + 'ms linear'
|
}
|
}
|
},
|
/* 创建动画计时器 */
|
createAnimation() {
|
// console.log("创建动画计时器")
|
if (this.roundTime) {
|
if (this.dir === 'vertical') {
|
this.animationVer();
|
this.interval = window.setInterval(this.animationVer, this.roundTime + this.wait)
|
} else {
|
this.animationHor();
|
this.interval = window.setInterval(this.animationHor, this.roundTime + this.wait)
|
}
|
}
|
},
|
/* 纵向滚动值变化 */
|
animationVer() {
|
// 跳页面 停止请求- 设备位置请求
|
if (this.hideSheB) {
|
console.log('清除滚动的定时器11111111111111')
|
this.clearInterval();
|
this.destroyEleResize();
|
return
|
}
|
console.log('滚动定时器go...............')
|
if (this.moveTop === 0) {
|
this.moveTop = -this.moveDistance
|
} else {
|
this.moveTop = 0
|
}
|
},
|
/* 横向滚动值变化 */
|
animationHor() {
|
if (this.moveLeft === 0) {
|
this.moveLeft = -this.moveDistance
|
} else {
|
this.moveLeft = 0
|
}
|
},
|
/* 计时器清楚 */
|
clearInterval() {
|
try {
|
window.clearInterval(this.interval)
|
this.interval = null;
|
} catch (e) {
|
//TODO handle the exception
|
}
|
},
|
/* div宽高变化事件移除 */
|
destroyEleResize() {
|
try {
|
// console.log("移出dom")
|
this.$utils.eleResize.off(document.getElementById("frame"), this.eleListener);
|
// this.$utils.eleResize.off(this.$refs.$frame, this.eleListener);
|
} catch (e) {
|
//TODO handle the exception
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.auto-scroll-compontent {
|
.auto-scroll-outer {
|
overflow: hidden;
|
width: 100%;
|
height: 100%;
|
|
&.vertical-outer {
|
position: relative;
|
}
|
|
&.horizontal-outer {}
|
}
|
|
.auto-scroll-wrapper {
|
&.vertical-wrapper {
|
position: absolute;
|
width: 100%;
|
height: auto;
|
left: 0;
|
}
|
|
&.horizontal-wrapper {
|
display: flex;
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
</style>
|
<style lang="scss">
|
.auto-scroll-compontent {
|
.auto-scroll-wrapper {
|
&.horizontal-wrapper {
|
&>* {
|
flex-shrink: 0;
|
}
|
}
|
}
|
}
|
</style>
|
