vue?頂部消息橫向滾動通知效果實現(xiàn)
更新時間：2024年02月29日 15:15:28 作者：努力學習的木子
系統(tǒng)頂部展示一個橫向滾動的消息通知,就是消息內(nèi)容從右往左一直滾動,這篇文章主要介紹了vue頂部消息橫向滾動通知,需要的朋友可以參考下
前言
系統(tǒng)頂部展示一個橫向滾動的消息通知，就是消息內(nèi)容從右往左一直滾動。
效果如下：
代碼
使用
<template>
<div class="notic-bar">
<img :src="notic" class="notice-img" />
<div class="notice-bar-container">
<div class="notice-bar__wrap">
<div
v-for="(item, index) in list"
:key="index"
class="notice-bar__wrap_text"
>
{{ item }}
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import notic from "../../public/notic.png";
const list = [
"開發(fā)不易，感謝理解",
"",
"感謝您的理解",
"",
"您的支持是我繼續(xù)完善的動力",
];
</script>
<style lang="scss" scoped>
.notic-bar {
display: flex;
background: #67c23a;
margin: 5px;
border-radius: 5px;
padding: 2px 5px;
}
.notice-bar-container {
display: flex;
width: calc(100% - 30px);
height: 20px;
overflow: hidden;
margin-left: 5px;
}
.notice-img {
width: 20px;
height: 20px;
}
.notice-bar__wrap {
margin-left: 10px;
display: flex;
animation: move 20s linear infinite;
line-height: 20px;
color: #f5f6f7;
.notice-bar__wrap_text {
width: max-content;
min-width: 100px;
}
}
@keyframes move {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
</style>到此這篇關(guān)于vue 頂部消息橫向滾動通知效果實現(xiàn)的文章就介紹到這了,更多相關(guān)vue 消息橫向滾動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue-router的HTML5 History 模式設(shè)置
這篇文章主要介紹了vue-router的HTML5 History模式設(shè)置，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家介紹了vue3組件庫Shake抖動組件搭建過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要介紹了vue攔截器如何增加token參數(shù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
今天小編就為大家分享一篇關(guān)于在Vue項目中引入JQuery-ui插件的講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
vue+Ant?Design進度條滑塊與input聯(lián)動效果實現(xiàn)
最近接到這樣一個需求滑塊進度與輸入框為一致,默認值為80,最小不能小于30,最大為100，怎么實現(xiàn)這個聯(lián)動效果呢，下面小編給大家分享下基于vue+Ant?Design進度條滑塊與input聯(lián)動效果的實現(xiàn)，感興趣的朋友跟隨小編一起看看吧2022-12-12
Vue 3中的defineEmits()和defineProps()使用小結(jié)
defineProps()和defineEmits()是Vue 3中Composition API的重要組成部分,它們分別用于定義組件接收的屬性和觸發(fā)的事件,本文給大家介紹Vue 3中的defineEmits()和defineProps()解析,感興趣的朋友跟隨小編一起看看吧2024-04-04
基于express中路由規(guī)則及獲取請求參數(shù)的方法
下面小編就為大家分享一篇基于express中路由規(guī)則及獲取請求參數(shù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
MD5是一種信息摘要算法(對稱加密),一種被廣泛使用的密碼散列函數(shù),可以產(chǎn)生出一個128位(16字節(jié))的散列值,用來確保信息傳輸完整一致性,這篇文章主要給大家介紹了關(guān)于Vue3使用MD5加密的相關(guān)資料,需要的朋友可以參考下2023-05-05
使用vue-infinite-scroll實現(xiàn)無限滾動效果
vue-infinite-scroll插件可以無限滾動實現(xiàn)加載更多，其作用是是當滾動條滾動到距離底部的指定高度時觸發(fā)某個方法。這篇文章主要介紹了用vue-infinite-scroll實現(xiàn)無限滾動效果,需要的朋友可以參考下2018-06-06
Element-UI日期選擇器(選擇日期范圍)禁用未來日期實現(xiàn)代碼
我們在網(wǎng)頁開發(fā)時通常需要用到一些日期組件來方便用戶選擇時間,其中element日期組件是一個非常好用的工具,這篇文章主要給大家介紹了關(guān)于Element-UI日期選擇器(選擇日期范圍)禁用未來日期的相關(guān)資料,需要的朋友可以參考下2024-02-02