vue?頂部消息橫向滾動(dòng)通知效果實(shí)現(xiàn)

更新時(shí)間：2024年02月29日 15:15:28 作者：努力學(xué)習(xí)的木子

系統(tǒng)頂部展示一個(gè)橫向滾動(dòng)的消息通知,就是消息內(nèi)容從右往左一直滾動(dòng),這篇文章主要介紹了vue頂部消息橫向滾動(dòng)通知,需要的朋友可以參考下

前言

系統(tǒng)頂部展示一個(gè)橫向滾動(dòng)的消息通知，就是消息內(nèi)容從右往左一直滾動(dòng)。

效果如下：

代碼

使用

<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ù)完善的動(dòng)力",
];
</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 頂部消息橫向滾動(dòng)通知效果實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue 消息橫向滾動(dòng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue-router的HTML5 History 模式設(shè)置
這篇文章主要介紹了vue-router的HTML5 History模式設(shè)置，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
vue3組件庫Shake抖動(dòng)組件搭建過程詳解
這篇文章主要為大家介紹了vue3組件庫Shake抖動(dòng)組件搭建過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
vue攔截器如何增加token參數(shù)
這篇文章主要介紹了vue攔截器如何增加token參數(shù)問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
在Vue項(xiàng)目中引入JQuery-ui插件的講解
今天小編就為大家分享一篇關(guān)于在Vue項(xiàng)目中引入JQuery-ui插件的講解，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧
2019-01-01
vue+Ant?Design進(jìn)度條滑塊與input聯(lián)動(dòng)效果實(shí)現(xiàn)
最近接到這樣一個(gè)需求滑塊進(jìn)度與輸入框?yàn)橐恢?默認(rèn)值為80,最小不能小于30,最大為100，怎么實(shí)現(xiàn)這個(gè)聯(lián)動(dòng)效果呢，下面小編給大家分享下基于vue+Ant?Design進(jìn)度條滑塊與input聯(lián)動(dòng)效果的實(shí)現(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ù)的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
Vue3使用MD5加密實(shí)戰(zhàn)案例(清晰明了)
MD5是一種信息摘要算法(對稱加密),一種被廣泛使用的密碼散列函數(shù),可以產(chǎn)生出一個(gè)128位(16字節(jié))的散列值,用來確保信息傳輸完整一致性,這篇文章主要給大家介紹了關(guān)于Vue3使用MD5加密的相關(guān)資料,需要的朋友可以參考下
2023-05-05
使用vue-infinite-scroll實(shí)現(xiàn)無限滾動(dòng)效果
vue-infinite-scroll插件可以無限滾動(dòng)實(shí)現(xiàn)加載更多，其作用是是當(dāng)滾動(dòng)條滾動(dòng)到距離底部的指定高度時(shí)觸發(fā)某個(gè)方法。這篇文章主要介紹了用vue-infinite-scroll實(shí)現(xiàn)無限滾動(dòng)效果,需要的朋友可以參考下
2018-06-06
Element-UI日期選擇器(選擇日期范圍)禁用未來日期實(shí)現(xiàn)代碼
我們在網(wǎng)頁開發(fā)時(shí)通常需要用到一些日期組件來方便用戶選擇時(shí)間,其中element日期組件是一個(gè)非常好用的工具,這篇文章主要給大家介紹了關(guān)于Element-UI日期選擇器(選擇日期范圍)禁用未來日期的相關(guān)資料,需要的朋友可以參考下
2024-02-02