vue移动端实现公告

Vue 移动端公告实现方法

使用 marquee 标签实现滚动公告

在 Vue 模板中使用 marquee 标签可以快速实现文字滚动效果，适合简单的公告需求。

<template>
  <div class="announcement">
    <marquee behavior="scroll" direction="left">
      {{ announcementText }}
    </marquee>
  </div>
</template>

<script>
export default {
  data() {
    return {
      announcementText: '重要公告：系统将于今晚12点进行维护升级...'
    }
  }
}
</script>

<style>
.announcement {
  padding: 10px;
  background-color: #f8f8f8;
  border-radius: 4px;
}
</style>

使用 CSS 动画实现更灵活的公告

通过 CSS 动画可以实现更平滑的滚动效果，且兼容性更好。

<template>
  <div class="announcement-container">
    <div class="announcement-text" :style="animationStyle">
      {{ announcementText }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      announcementText: '重要公告：系统将于今晚12点进行维护升级...',
      animationDuration: 10
    }
  },
  computed: {
    animationStyle() {
      return {
        animation: `scroll ${this.animationDuration}s linear infinite`
      }
    }
  }
}
</script>

<style>
.announcement-container {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  padding: 10px;
  background-color: #f8f8f8;
}

@keyframes scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
</style>

使用第三方组件实现功能丰富的公告

对于更复杂的需求，可以使用第三方 Vue 组件如 vue-notification 或自定义组件。

安装 vue-notification：

npm install vue-notification

使用示例：

<template>
  <div>
    <button @click="showNotification">显示公告</button>
    <notifications group="announcement" position="top center"/>
  </div>
</template>

<script>
import Vue from 'vue'
import Notifications from 'vue-notification'

Vue.use(Notifications)

export default {
  methods: {
    showNotification() {
      this.$notify({
        group: 'announcement',
        title: '重要公告',
        text: '系统将于今晚12点进行维护升级',
        duration: 5000
      })
    }
  }
}
</script>

实现可点击的公告栏

增加交互功能，让用户可以点击公告查看详情。

<template>
  <div class="announcement" @click="showDetail">
    <div class="content">
      <span class="icon">!</span>
      <span class="text">{{ shortText }}</span>
    </div>
    <div class="detail" v-if="showDetailModal">
      <div class="modal">
        <h3>公告详情</h3>
        <p>{{ fullText }}</p>
        <button @click="closeDetail">关闭</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shortText: '系统维护通知...',
      fullText: '详细公告内容：系统将于今晚12点至次日6点进行维护升级，期间将无法访问...',
      showDetailModal: false
    }
  },
  methods: {
    showDetail() {
      this.showDetailModal = true
    },
    closeDetail() {
      this.showDetailModal = false
    }
  }
}
</script>

<style>
.announcement {
  background-color: #fff8e1;
  padding: 10px;
  border-radius: 4px;
  margin: 10px;
  cursor: pointer;
}

.detail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  background: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 80%;
}
</style>

实现轮播多条公告

对于需要展示多条公告的情况，可以实现公告轮播效果。

<template>
  <div class="announcement-carousel">
    <transition name="fade" mode="out-in">
      <div class="announcement-item" :key="currentIndex">
        {{ announcements[currentIndex] }}
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      announcements: [
        '公告1：系统维护通知',
        '公告2：新功能上线',
        '公告3：用户协议更新'
      ],
      currentIndex: 0,
      interval: null
    }
  },
  mounted() {
    this.interval = setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.announcements.length
    }, 3000)
  },
  beforeDestroy() {
    clearInterval(this.interval)
  }
}
</script>

<style>
.announcement-carousel {
  height: 40px;
  overflow: hidden;
  position: relative;
}

.announcement-item {
  padding: 10px;
  background-color: #f5f5f5;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>