uni-app 实现类似QQ消息通知的顶部弹窗消息通知功能

在uni-app中实现类似QQ消息通知的顶部弹窗消息通知功能，可以通过使用uni-app提供的Toast、Modal等内置组件，或者自定义一个弹窗组件来实现。由于Toast和Modal的样式和功能可能无法满足所有定制需求，这里我们将展示如何通过自定义一个顶部弹窗组件来实现这一功能。

1. 创建自定义弹窗组件

首先，在components目录下创建一个名为TopNotification.vue的组件文件：

<template>
  <view v-if="visible" class="notification-container">
    <view class="notification-content">{{ message }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      message: ''
    };
  },
  methods: {
    show(msg) {
      this.message = msg;
      this.visible = true;
      setTimeout(() => {
        this.hide();
      }, 3000); // 3秒后自动隐藏
    },
    hide() {
      this.visible = false;
    }
  }
};
</script>

<style scoped>
.notification-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
  z-index: 9999;
}
.notification-content {
  padding: 10px;
  border-radius: 5px;
  background-color: #ff4d4f;
}
</style>

2. 在页面中使用自定义弹窗组件

然后，在需要使用消息通知功能的页面中引入并使用这个组件：

<template>
  <view>
    <!-- 页面内容 -->
    <TopNotification ref="notification" />
    <button @click="showNotification">显示通知</button>
  </view>
</template>

<script>
import TopNotification from '@/components/TopNotification.vue';

export default {
  components: {
    TopNotification
  },
  methods: {
    showNotification() {
      this.$refs.notification.show('这是一条顶部通知消息！');
    }
  }
};
</script>

3. 运行项目

确保项目结构正确，然后运行uni-app项目，点击按钮即可看到顶部弹窗消息通知的效果。

以上代码实现了一个简单的顶部弹窗消息通知功能，你可以根据实际需求对样式和功能进行进一步定制，比如添加动画效果、点击关闭按钮等。