套在自己的vue模板里面即可
<div v-if="this.content" class="marquee-container" ref="marqueeContainer">
<span :class="{ 'marquee-text': true, 'marquee-move': shouldMove }" ref="scrollingText" v-if="this.showResult">
{
{
content }}
</span>
</div>
content是显示的内容，shouldMove是否滚动(如果大于了文本框才滚动，否则禁止不懂)，showResult是否显示滚动条
data() {
return {
content: '',
shouldMove: true,
showResult: false,
}
},
created() {
this.getSurvey()
},
mounted() {
},
beforeDestroy() {
window.removeEventListener('resize', this.checkOverflow);
},
methods: {
checkOverflow() {
const scrollingText = this.$refs.scrollingText;
const marqueeContainer = this.$refs.marqueeContainer;
console.log(scrollingText.scrollWidth)
console.log(marqueeContainer.clientWidth)
this.shouldMove = scrollingText.scrollWidth > marqueeContainer.clientWidth;
if (!this.content || this.content.trim() === '') {
this.shouldMove = false;
}
},
async getSurvey(){
let {
data, errorCode }=await this._get(this.API.queryMarketSurvey(
this.menuId
))
if(errorCode==0){
console.log(data)
this.showResult = data.showResult
this.content = data.content;
this.$nextTick(()=>{
this.checkOverflow();
window.addEventListener('resize', this.checkOverflow);
})
}
},
.marquee-container {
background-color: #7a00e6; /* 背景颜色 */
color:#fff;
height: 16px;
line-height: 16px;
font-size: 12px;
padding-left:12px;
width: 100%;
white-space: nowrap;
overflow-x: auto;
}
.marquee-text {
display: inline-block; /* 使文本以块级元素显示 */
font-family: 'YourFont', sans-serif; /* 替换成你的字体 */
}
.marquee-move {
animation: marquee 10s linear infinite; /* 使用 linear 以保持匀速移动 */
}
@keyframes marquee {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
效果
