methods: {
mouseenterFunc: function () {
this.hoverPause && (this.enable = false)
},
mouseleaveFunc: function () {
this.hoverPause && (this.enable = true)
},
computeChildrenDom: function () {
return new Promise(resolve => {
if (this.$refs.originDomItem[0].children.length) {
let origin = [...this.$refs.originDomItem[0].children]
this.originLength = origin.length
let repeatTime = 1
if (!this.repeat && this.childrenDom.length < this.showCount) {
console.log()
} else {
while (repeatTime * this.originLength < this.showCount + 2) {
repeatTime = repeatTime + 1
}
}
this.repeatTime = repeatTime
this.childrenDom = []
this.$nextTick(() => {
let list = [...this.$refs.originDomItem]
list.forEach(item => {
[...item.children].forEach(dom => {
dom.style.position = 'absolute'
dom.style.transition = `all ${this.transitionDuration / 1000}s`
dom.style.width = '100%'
dom.style.opacity = 1
this.childrenDom.push(dom)
})
})
resolve()
})
}
})
},
computeContainerHeight: function () {
if (!this.childrenDom.length) {
return false
}
let sum = 0
for (let i = 0; i < this.showCount; i++) {
let index = (this.active + i) % this.childrenDom.length
sum = sum + this.childrenDom[index].offsetHeight
}
this.$refs.banner && (this.$refs.banner.style.height = `${sum}px`)
},
computeItemStyle: function () {
if (!this.childrenDom.length) {
return false
}
if (!this.repeat && this.childrenDom.length < this.showCount + 1) {
let sum = 0
this.childrenDom.forEach((item, index) => {
item.style.top = `${sum}px`
item.style.left = 0
item.style.opacity = this.startOpacity + (this.endOpacity - this.startOpacity) / (this.childrenDom.length - 1) * index
item.style.filter = `blur(${this.startBlur + (this.endBlur - this.startBlur) / (this.childrenDom.length - 1) * index}px)`
sum = sum + this.childrenDom[index].offsetHeight
})
} else {
let sum = 0
let indexList = []
let prevIndex = (this.active + this.childrenDom.length - 1) % this.childrenDom.length
let prev = this.childrenDom[prevIndex]
prev.style.top = 0
prev.style[this.reverse ? 'left' : 'right'] = `${this.offsetPrecent / 100 * this.$refs.banner.offsetWidth}px`
prev.style.opacity = 0
prev.style.pointerEvents = 'none'
indexList.push(prevIndex)
for (let i = 0; i < this.showCount; i++) {
setTimeout(() => {
let index = (this.active + i) % this.childrenDom.length
indexList.push(index)
this.childrenDom[index].style.top = `${sum}px`
this.childrenDom[index].style[this.reverse ? 'left' : 'right'] = 0
this.childrenDom[index].style.pointerEvents = 'auto'
if (this.showCount > 1) {
this.childrenDom[index].style.opacity = this.startOpacity + (this.endOpacity - this.startOpacity) / (this.showCount - 1) * i
this.childrenDom[index].style.filter = `blur(${this.startBlur + (this.endBlur - this.startBlur) / (this.showCount - 1) * i}px)`
} else {
console.log(this.startOpacity)
this.childrenDom[index].style.opacity = this.startOpacity
this.childrenDom[index].style.filter = `blur(${this.startBlur}px)`
}
sum = sum + this.childrenDom[index].offsetHeight
}, this.animationInterval * (i + 1))
}
setTimeout(() => {
for (let i = 0; i < this.childrenDom.length; i++) {
if (indexList.indexOf(i) < 0) {
this.childrenDom[i].style[this.reverse ? 'left' : 'right'] = 0
this.childrenDom[i].style.top = `${sum}px`
this.childrenDom[i].style.opacity = 0
this.childrenDom[i].style.pointerEvents = 'none'
}
}
}, this.showCount * this.animationInterval)
}
},
animationFrame: function () {
window.requestAnimationFrame(() => {
if (this.enable) {
this.timer = this.timer + 1000 / 60
if (this.timer > this.intervalTime) {
this.timer = 0
this.active = (this.active + 1) % this.childrenDom.length
this.$emit('changeActive', this.active % this.originLength)
this.computeContainerHeight()
this.computeItemStyle()
}
}
this.alive && this.animationFrame()
})
},
init: function () {
setTimeout(() => {
this.computeChildrenDom().then(() => {
this.computeContainerHeight()
this.computeItemStyle()
})
}, 0)
}
},
2、使用
<autoScorll :isHover="true" :list="gatherDatas" :timeSpace="3000" :showCount="count"
:length="gatherDatas.length" v-if="gatherDatas.length > 0" class="warp">
<div class="item" v-for="item in gatherDatas" :key="item.id">
<div class="cItem">
<span :title="item.name">{{ item.name }}</span>
<span :title="item.alertTime">{{ item.alertTime }}</span>
</div>
</div>
</autoScorll>
data() {
return {
titles: ['民情采集', '民意回访'],
progress: {
gatherClosedAccount: 326,
gatherUnsettled: 16,
visitClosedAccount: 78,
visitUnsettled: 36,
},
count: 8,
gatherDatas: [
{
name: '测试1',
alertTime: '2023-10-12 00:12:56',
position: '街道1'
},
{
name: '测试2',
alertTime: '2023-10-12 00:12:56',
position: '街道2'
},
{
name: '测试3',
alertTime: '2023-10-12 00:12:56',
position: '街道3'
},
{
name: '测试4',
alertTime: '2023-10-12 00:12:56',
position: '街道4'
},
{
name: '测试5',
alertTime: '2023-10-12 00:12:56',
position: '街道5'
},
{
name: '测试6',
alertTime: '2023-10-12 00:12:56',
position: '街道5'
},
{
name: '测试7',
alertTime: '2023-10-12 00:12:56',
position: '街道5'
},
{
name: '测试8',
alertTime: '2023-10-12 00:12:56',
position: '街道5'
},
{
name: '测试9',
alertTime: '2023-10-12 00:12:56',
position: '街道5'
},
{
name: '测试10',
alertTime: '2023-10-12 00:12:56',
position: '街道5'
},
]
}
},
