<template>
<div class=“
ScrollData_containe”>
<div class=“item_header”>
<p v
-for=“(item, index) in header”
:key=“index”>
<span v
-if=“item.icon”
><i class=“iconfont”
:class=“[item.icon]”></i
></span>
{{ item.text }}
</p>
</div>
<div class=“item_cont” ref=“topbox”>
<div
:class=“[‘font
-list’, dynamicCls]”
:style=“dynamicSty”>
<div class=“
scrollBox” ref=“fontbox”>
<p v
-for=“(item, index) in data”
:key=“index”>
<!
-- :class=“[Math.floor(Math.random() * 18) == 2 ? ‘bgChange’
: ‘’]”
-->
<span>{{ item.one }}</span>
<span>{{ item.two }}</span>
<span>{{ item.three }}</span>
<span>{{ item.four }}</span>
<span>{{ item.five }}</span>
</p>
</div>
<div class=“
scrollBox” ref=“doubleData”>
<p v
-for=“(item, index) in data”
:key=“index”>
<!
-- :class=“[Math.floor(Math.random() * 18) == 2 ? ‘bgChange’
: ‘’]”
-->
<span>{{ item.one }}</span>
<span>{{ item.two }}</span>
<span>{{ item.three }}</span>
<span>{{ item.four }}</span>
<span>{{ item.five }}</span>
</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props
: {
data
: Object,
header
: Array,
pageDuration
: {
type
: Number,
default
: 12
}
},
data() {
return {
doubleData
: false, // 是否需要双份数据
fontBox
: null, // 文字容器
topBox
: null, // 文字父级容器
countFlag
: 0, // 切换clss类标识符
dynamicCls
: “”, // 动态class类，切换使用解决数据更新后动画不重新开始问题
dynamicSty
: {},
scrollIndex
: 0,
new
ScrollData
: null,
scrollTimer
: null,
scrollBox
: null,
speed
: 30 //
滚动速度
};
},
methods
: {
calcHeight() {
// 判断内容是否超出容器，如果超出容器、追加一份数据
if (this.fontBox.offsetHeight > this.topBox.offsetHeight) {
this.doubleData = true;
this.countFlag += 1;
// 切换动画类名
this.dynamicCls =
scroll-cls${this.countFlag % 2};
// 动态计算动画时长
this.dynamicSty = {
animationDuration
: ${ (this.fontBox.offsetHeight / this.topBox.offsetHeight) * this.pageDuration }s
};
} else {
this.doubleData = false;
this.dynamicCls = “”;
this.dynamicSty = {
animationDuration
: “0s”
};
}
}
},
watch
: {
// 监听内容变化
data
: {
deep
: true,
handler(_val) {
this.calcHeight();
}
}
},
mounted() {
this.fontBox = this.$refs.fontbox;
this.topBox = this.$refs.topbox;
this.$nextTick(() => {
this.calcHeight();
});
},
beforeDestroy() {}
};
</script>
<style lang=“scss” scoped>
.
scroll-cls0 {
animation
: translateY1 8s 0.5s linear infinite;
}
.
scroll-cls1 {
animation
: translateY2 8s 0.5s linear infinite;
}
// .font
-list
:hover {
// animation
-play
-state
: paused;
// }
@keyframes translateY1 {
from {
transform
: translateY(0);
}
to {
transform
: translateY(
-50%);
}
}
@keyframes translateY2 {
from {
transform
: translateY(0);
}
to {
transform
: translateY(
-50%);
}
}
.bgChange {
background
: #211141 !important;
span {
text
-shadow
: 0 0 10px #f00;
}
}
.item_header {
display
: flex;
justify
-content
: space
-between;
height
: 0.2125rem;
background
: #111843;
p {
color
: #fff;
flex
: 1;
line
-height
: 0.2125rem;
padding
-left
: 0.0625rem;
font
-family
: “OPPOSANS
-M”;
span {
display
: inline
-block;
width
: 0.125rem;
height
: 0.125rem;
line
-height
: 0.125rem;
background
: #304bfa;
text
-align
: center;
box
-shadow
: 0 0 10px #bc6fea;
text
-overflow: ellipsis;
overflow: hidden;
white
-space
: nowrap;
vertical
-align
: middle;
border
-radius
: 0.0125rem;
}
.iconfont {
color
: #fff !important;
font
-size
: 0.0875rem;
}
}
}
.item_cont {
height
: 1.875rem;
box
-sizing
: border
-box;
overflow: hidden;
position
: relative;
.
scrollBox {
// position
: absolute;
width
: 100%;
left
: 0;
p {
display
: flex;
justify
-content
: space
-between;
background
: #060a24;
height
: 0.2rem;
line
-height
: 0.2rem;
margin
: 0.0125rem 0;
color
: #fff;
font
-size
: 0.0875rem;
font
-family
: “OPPOSANS
-M”;
span {
flex
: 1;
overflow: hidden;
text
-overflow: ellipsis;
white
-space
: nowrap;
padding
: 0 0.0625rem;
}
}
}
}
</style>
在该代码的基础上优化，麻烦给出完整的优化结果
本文介绍了一种解决CSS中水平与垂直滚动条显示冲突的方法。通过调整容器宽度并利用overflow-y属性实现仅在需要时显示垂直滚动条，同时避免了水平滚动条的出现。
扫一扫
4671
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
