vue 新消息提示

2019-11-10 admin

场景分析: 场景1:一个人(信息列表一条)发了多条消息(消息列表多条); 场景2:多个人(信息列表多条)发送了多条消息(消息列表多条)。

思路: 1.把请求的消息列表push进一个数组中,提交到vuex。 2.消息组件外部引用这个数组与最新的请求列表做数据对比(消息id) 3.把id不同的列表再push进一个新数组。 4.这个数组的长度就是新消息的条数,如果两个数组的id/长度都相同的话,没有数据push长度为0,则表示没有新消息。

//组件内部消息请求
getNewsList() { 
  classificationList() 
   .then(res => { 
      this.newsList = res.Rows; 
      // 1新数组 
      let newArr = []; 
      for(let i=0; i<res.Rows.length; i++){
       //2.把请求得来的数据push进新数组 
       newArr.push({MsgId:res.Rows[i].MsgId});
     }
    //3.提交到vuex中保存 
    this.$store.commit('setNewsData',{newArr:newArr});
 })
  .catch(err => { 
       console.log("error", err); 
   });
 }
//组件外部消息请求
//html
<div class="fl">
    我的消息<span v-show="newLen" class="news">{{newLen}}</span>
</div>

<script>
import { mapState } from "vuex";
import {classificationList} from '@/http/index'

export default{
    data(){
        return {
            newLen:0
        }
    },

    computed:{
      ...mapState({
         newsLength: state => state.setNewsData
      })
    },

    created(){
      this.getNewsList();
    },

    methods:{
        getNewsList() {
          classificationList()
            .then(res => {
                //1.新建用来存放新消息的数组
              let newarr = [];
              //2.最新请求的数据,与上一轮的传到vuex的数据做对比
              for(var i=0; i<res.Rows.length; i++){
                for(var j=0; j<this.newsLength.newArr.length; j++){
                    //3.把不一致的数据push进新数组
                  if(this.newsLength.newArr[i].MsgId != res.Rows[i].MsgId){
                     newarr.push({id:res.Rows[i].MsgId});
                  }
                }
              }
              //4.这数据的长度就代表新消息的条数,放到data中供渲染。
              this.newLen = newarr.length;
            })
            .catch(err => {
              console.log("error", err);
            });
        }
    }
}
</script>

1.消息外部 消息外部

2.消息组件内部 消息组件内部

3.有新消息提醒 新消息提醒

PS:新手第一次尝试写博客,有什么地方不好的还望诸位不吝赐教 author:Github ----- XiNine

[转载]原文链接:https://segmentfault.com/a/1190000020948698

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78883.html

文章标题:vue 新消息提示

相关文章
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
最细致的vue.js基础语法 值得收藏!
介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 ...
2017-03-21
微信公众号实现无限制推送模板消息!可向指定openID群发
微信认证的服务号才有推送模板消息接口 所以本文需要在认证服务号的情况下学习 以上就是模板消息,只有文字和跳转链接,没有封面图。 在服务号的后台添加功能插件-模板消息即可。 模板消息,都是在后台选择一个群发模板的,然后获取模板ID,根据这...
2018-01-14
mpvue 小程序如何开启下拉刷新,上拉加载?
https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#onpulldownrefresh 小程序API 微信小程序之下拉加载和上拉刷新 微信小程序下拉加载和上拉...
2018-05-25
百度新功能【特效搜索】演示 惊呆了小伙伴
百度搜索最近又出新玩意新功能了,可能你还没有发现,名为【百度特效搜索】已经默默上线了,有什么效果呢? 在百度搜索中根据用户搜索的关键词来出发某些动作,例如笔者搜索“打雷”关键字,在搜索结果中你会听到有打雷声, 黑洞,闪烁、翻转、跳跃,打雷,...
2015-11-12
mpvue 小程序如何自定义tabBar,不使用navigateTo跳转,模拟redirectTo跳转
原生tabBar tabBar: { &quot;list&quot;: [ { pagePath: &quot;pages&#x2F;index&#x2F;main&quot;, iconPath: &...
2018-05-25
vue-video-player 更改视频源
背景:根据用户的信息来显示不同的视频源 &lt;template&gt; &lt;div class=&quot;video-box-wrap&quot; v-show=&quot;video.show&quot;&gt; ...
2018-05-05
在 mpvue 使用 echarts 小程序组件
具体操作 下载 echarts-for-weixin 。 把其 ec-canvas 目录移动到 mpvue 项目的 static 目录下。 对 ec-canvas/ec-canvas.js 进行小调整,考虑提 pr 到 ec-c...
2018-03-11
回到顶部