顶部消息通知栏消息数与页面中数据同步更新

最新推荐文章于 2023-07-13 15:14:18 发布
最新推荐文章于 2023-07-13 15:14:18 发布
阅读量378 收藏 3
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45669668/article/details/111592342
版权
本文介绍了一个需求，即在顶部显示的告警信息数目与页面中处理的告警信息同步更新。当用户在页面中点击标记一条未读告警为已读后，顶部的消息计数会相应减少。实现方案是在app.vue中引入并注册reload方法，以实现实时刷新功能。
摘要由CSDN通过智能技术生成

需求—
顶部告警信息数
在这里插入图片描述

处理的告警信息页面-
在这里插入图片描述
要求点击页面中未读后处理完单条信息，告警信息数量 -1 ，同时顶部栏消息数 同步 -1

借鉴内容

在app.vue中

<template>
  <div id="app">
最低0.47元/天 解锁文章
_潮汐海灵_
关注
专栏目录
鸿蒙开发者高级能力认证考试题目（96分）
喜欢猪猪
12-04 3748
[判断题] 2/2 云函数打包完成后，需要到AppGallery Connect创建对应函数的触发器才可以在端侧中调用 错误(False) [判断题] 2/2 每一个自定义组件都有自己的生命周期 正确(True) [判断题] 2/2 基于端云一体化开发，开发者需要精通前端、后端不同的开发语言 错误(False) [判断题] 2/2 首选项preferences是以Key-Value形式存储数据，其中Key是可以重复。 错误(False) [判断题] 2/2 Ha
网页顶部滚动消息组件（marquee）
wozhenhaokan的博客
10-25 676
网页顶部滚动消息组件（marquee）
Telephony-通知栏信息同步
悟心的专栏
09-22 310
1. lncomingCallNotifier lncomingCallNotifier类负责在手机状态栏显示或隐藏来电信息，通过 onCallAdded，onCallRemoved，onCallStateChanged方法的消息回调，在updateIncomingCall中实现显示或隐藏来电信息，关键逻辑详情如下。 //创建Notification.Builder 对象并发出通知，在通知栏显示 buider对象中的内容 private void showIncomingCallNotificati
网页顶端显示消息
a4604678的博客
10-16 162
var cookiename=getCookie("screentopdiv");if (cookiename == "0") { document.write('<div id="screentopdiv" style=" text-align: center; font-size: 14px; padding: 5px 0; background-color: rg...
实用窗口顶部消息通知、提示和确认jQuery插件
12-10
overhang.js是一款非常实用的窗口顶部消息通知、提示和确认jQuery插件。实际上它可以在任何指定元素的顶部制作出消息通知框、消息提示框和消息确认框。
使用vuex实时更新右上角通知信息的红点数量
weixin_39255905的博客
06-23 2235
使用vuex实时更新右上角通知信息的红点数量
仿QQ顶部的消息和电话导航
12-24
【仿QQ顶部的消息和电话导航】是一个Android应用开发项目，主要目标是实现与QQ应用相似的顶部消息通知和导航功能。这个项目的核心在于利用Fragment来管理不同的页面，并通过监听用户的交互来实现动态的效果。 首先...
android滑动导航 (滑动导航栏+滚动页面）
09-15
对于动态管理页面，可以通过在Adapter中添加或移除页面并通知Adapter数据集发生变化来实现。 此外，为了优化用户体验，我们还可以考虑实现一些附加功能，例如页面预加载，这可以减少用户在滑动时的等待时间。还可以...
fastadmin开发：全局定时加载AJAX,实现有新消息，及时变更消息数量和声音循环提醒
和信立网络
05-15 805
项目需要，从控制器方法拿到最新的数据或者在用户操作时，及时给系统提醒，所以需要所有页面，都可以看到，需要全局引用。我们的思路是在全部页面都能看到的是头部，左侧菜单等。把数据在这些地方显示出来，很明显。另外需要一个声音提示，只要在后台，有新消息时，声音提醒。很实用。 1、使用AJAX从控制器方法里拿到最新的数据。 ...
消息提示--有消息来时TOP页面自动刷新未读消息条数
dandelion(蒲公英)的专栏
08-24 3423
<br />top.aspx页面：实现AJAX和JQUERY调用请求<br /><script src="js/jQuery.js"></script><br /><script><br />    //实际使用过程中可以从session中获取<br />    //var aa = Request.Cookies["username"].value;<br />    if (!GetMessageCount) {<br />        var GetMessageCount = {};<br /> 
Vue消息列表已读/未读状态实时更新及数据更新set()用法
米拉
07-23 7364
效果如下： 代码部分：(HTML部分使用Element的Collapse 折叠面板) <template> <el-collapse accordion> <el-collapse-item v-for="(list,index) in noticeData" :key="index" > <template slot="title"> <span v-if="list.status == 0">[未读]</span> &lt
环信的那些”已读“—web端
最新发布
m0_59353079的博客
07-13 389
Q：发送了消息已读回执，为什么消息列表页的未读数没有发生变化？A:会话和消息是两个概念，会话已读是会话已读，消息已读是消息已读，消息已读无法改变会话列表的数据Q：发送了消息已读回执，为什么消息漫游拉取不到已读状态？A：环信的服务器不记录消息状态，需要自己本地存储或者使用reaction功能间接实现。
vue 使用vuex实现消息通知提示
weixin_38984353的博客
09-13 3376
2.更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数,在通过mutation更新数据的时候, 有可能我们希望携带一些额外的参数，你可以向 store.commit 传入额外的参数。因为你可能这个铃铛数量的改变是多个页面影响的。4.接下来vuex的工作都准备好了，接下来在你需要操作的页面，我是在mian.js 调用action的方法。至此利用vuex进行实时刷新的消息通知数量的功能已完成。
vue通知提醒消息
weixin_55853065的博客
10-17 8750
最近有个项目需求就是在客户端的右上角要实时展示提醒消息，下面来看下简单的实现步骤/* 全局Notification */})}
vue页面从最顶部位置显示 和 返回上层页面还原滚动位置
weixin_45670398的博客
06-02 1347
上网查了使用下面方法 页面最顶部位置显示 确实有效 在main.js 全局定义 // 页面跳转 页面的位置从最顶部开始 router.afterEach((to,from, next) => { window.scrollTo(0,0) }) 接下来我要实现返回上层页面还原滚动位置 在index.js（router.js） // 添加meta： {keepAlive: true} { path: '/orderClinc', name: 'OrderClinc', m.
VUE 实现购物车或者消息中心未读消息数量的实时监听
add-oil的博客
01-16 6064
涉及到商城，平台等项目一般都会有实时数据的更新问题，比如这种： 下面是我的处理方式：全局绑定一个方法 Vue.prototype.$addStorageEvent = function (type, key, data) { if (type === 1) { // 创建一个StorageEvent事件 var newStorageEvent = document.creat...
js仿通知栏新消息实时推送更新效果
qq_38822390的博客
10-29 838
在最近的项目里面，用到websocket做消息推送，其中有这样的一个效果，在消息列表的模块，接收到很多条信息，展示在界面的是最近的十条接受到的消息，实时更新模块，每次接受一条消息，都会展示在最顶部，旧的消息排列在地下，大致效果如下所示。 用js仿写了一个简单的，关于通知栏新消息实时推送更新效果，代码如下： &lt;!DOCTYPE html &gt; &lt;html&gt; ...
HTML页面头部信息
晨丶曦_的博客
04-08 2756
1.让一些搜索引擎可以搜索到你的网页：<meta name="keywords" content="搜索的关键字"> <meta name="description" content="网站描述文字">2.让一个页面过一段时间自动挑战到另一个页面<meta http-equiv="refresh" content="5"> 这个表示页面每5秒刷新一次<meta http-equiv="refre
Android消息推送实践：5个实用通知栏Demo源码
资源摘要信息: "Android实例源码-消息推送通知栏类安卓源代码（5例）.zip"文件包含了多个Android平台上的消息推送通知栏类实现的示例代码。这些示例涉及了从基础的通知功能到复杂的通知与服务器通信的完整流程，包括...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值