文字滚动通知功能实现 vue 组件

工作中有使用到文字滚动功能，做个demo记录，方便下次复制，分享给大家。

点击 预览
https://works-ipo66c6f46dc36334645e6fc471-5173.node01.inscode.run/

<script setup lang="ts">
import { ref, nextTick } from 'vue';
const noticeList = ref([]);const getNoticeList = async () => {const list = ['测试文字','11111111111111111111111111111111111111111111111111111111','哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈',];noticeList.value = list;nextTick(() => {const content = document.querySelector('.scroll-content');const contentOffsetWidth = content.offsetWidth;// 根据内容长度计算动画持续时间// 假设每秒滚动100px width 越大，速度越快const width = 100;const duration = Math.floor(contentOffsetWidth / width);content.style.animationDuration = `${duration}s`;});
};getNoticeList();
</script><template><div class="scroll-container"><div class="scroll-content"><div v-for="(item, index) in noticeList" :key="item + index" class="item">{{ item }}</div></div></div>
</template><style scoped>
.scroll-container {display: flex;align-items: center;background: red;width: 800px;overflow-x: hidden; /* 启用水平滚动 */overflow-y: hidden; /* 隐藏垂直滚动条 */white-space: nowrap; /* 防止内容换行 */position: relative;z-index: 99;
}.scroll-content {display: inline-block; /* 让内容作为内联块级元素，以便宽度自动调整 */padding: 10px; /* 可选：添加内边距以调整内容位置 */will-change: auto;animation: scroll-left 10s linear infinite; /* 动画设置 */
}.item {display: inline-block; /* 让每个条目水平排列 */text-align: left;padding-left: 800px;color: #fff;
}@keyframes scroll-left {from {transform: translateX(0);}to {transform: translateX(-100%); /* 根据内容总长度调整 */}
}
</style>