H5 实现类似QQ消息列表(已读，未读)拖拽点击事件功能

HBulider实现消息列表，右侧滑动拖拽进行(已读，未读，删除)点击事件功能详情

首先第一步列表界面，并且列表上添加一个显示消息的标注；如：mui-badge；

对列表滑动拖拽事件；

拖拽事件上的标签进行监听以及逻辑的判断处理；

此功能牵涉到底部导航栏，类似QQ，底部会显示未读消息的总数；

通过事件的监听到总数，再进行本地存储，传给底部选项卡的标注处显示；

点击已读，消息列表总数-1，点击“标为未读”消息列表+1；

处理方法公式：总数=总数+1（判断当前列表为未读的状态)；

时间可贵，上面阐述了对这个功能的逻辑和处理，现在直接进入主题看看代码吧！

创建列表界面（div-ui-li）

<div class="mui-content"><ul class="mui-table-view" id="datalist_1"></ul>
</div>

接口数据调用动态显示列表数据，此时需要注意调用全局变量divs，carlist；

function Zx_meessage(username,id){ mui.ajax('这里就是你们服务器的地址啦！',{data:{username:username,userid:id},dataType:'json',//服务器返回json格式数据type:'post',//HTTP请求类型timeout:10000,//超时时间设置为10秒；//headers:{'Content-Type':'application/json'},                 success:function(data){document.getElementById('datalist_1').innerHTML = divs;//全部console.log(JSON.stringify(data))carlist = data.messageBeans;for(i=0;i<data.messageBeans.length;i++){//循环总列表var clist = carlist[i];divs+='<li class="mui-table-view-cell">';divs+='<div class="mui-slider-right mui-disabled">';divs+='<a data-st1 =\''+clist.id+'\' data-st2=\''+clist.messageRead+'\' class="mui-btn mui-btn-yellow" style="font-size:16px;"></a>';//这个是标为已读和未读的标签divs+='<a data-st1=\''+clist.id+'\' data-st2=\''+clist.userID+'\' class="mui-btn mui-btn-red mui-icon mui-icon-trash"></a>';//这个是点击进行删除当前列表的标签divs+='</div>';divs+='<div class="mui-slider-handle mui-table">';//divs+='<img style="width: 30px; float: left;margin-right: 10px;" src="data:images/77.png"/>'; divs+='<div style="float: left;font-size:16px;">'+clist.userName+'</div>'; divs+='<a href="javascript:;" data-rel="'+clist.id+'">';if(clist.messageRead==0){  //判断是为0的才显示红色标注消息，否则隐藏；jiaobiao=jiaobiao+1divs+='<span id="sanda" style="float:right; background-color: #FF3030;color: #ffffff;" class="mui-badge">1</span>';}else{divs+='<span style="float:right; background-color: #FF3030;color: #ffffff;" class="mui-badge mui-hidden">1</span>';}divs+='<div style="float:right;margin-top: 15px;font-size: 13px;color: #000000;">'+timestampToTime(clist.messageTime)+'</div></br></a>';divs+='<div style="float:left;margin-top:5px;font-size: 13px;">'+clist.messageCon+'</div>';divs+='</div>'; divs+='</li>';}localStorage.setItem('jiaobiao',jiaobiao);//本地存储当前的角标总数值，方便给底部选项卡调用；document.getElementById('datalist_1').innerHTML += divs;//全部列表},});}

ok，上面是详细的列表界面获取；下面就界面拖拽点击事件；
分为三部：监听拖拽事件滑出来时逻辑处理，点击了span【0】的点击标为已读和未读的监听，点击删除事件的逻辑监听；

//这个为拖拽滑出时的判断
$('#datalist_1').on('slideleft', '.mui-table-view-cell', function(event) {var elem = this;console.log(elem.getElementsByTagName("span")[0].className)if (elem.getElementsByTagName("span")[0].className=="mui-badge"){elem.getElementsByTagName("a")[0].innerHTML="标为已读";console.log('滑动出来_标为已读')}else{elem.getElementsByTagName("a")[0].innerHTML="标为未读";}});

//这个为拖拽出来标为已读或者未读的点击事件
$("#datalist_1").on("tap",".mui-btn-yellow",function(event){var elem = this;var li = elem.parentNode.parentNode; console.log('当前的列表id：'+elem.getAttribute("data-st1")+'——————————-当前列表id的消息值是否为0:'+elem.getAttribute("data-st2"))
//                  var spandat = parseInt(li.getElementsByTagName("span")[0].innerHTML);//console.log(li.getElementsByTagName("span")[0].innerHTML)console.log("das"+li.getElementsByTagName("span")[0].className)if(li.getElementsByTagName("span")[0].className=='mui-badge'){bjyd(elem.getAttribute("data-st1"),1)//要已读就传1li.getElementsByTagName("span")[0].classList.add('mui-hidden');elem.innerHTML='标为已读'  localStorage.setItem('jiaobiao',localStorage.getItem('jiaobiao')-1);}else{bjyd(elem.getAttribute("data-st1"),0)//未读传0li.getElementsByTagName("span")[0].classList.remove('mui-hidden');elem.innerHTML='标为未读'localStorage.setItem('jiaobiao',parseInt(localStorage.getItem('jiaobiao'))+1);} console.log(localStorage.getItem('jiaobiao')) setTimeout(function() {             $.swipeoutClose(li); }, 0); })

//拖拽删除点击事件
$("#datalist_1").on("tap",".mui-btn-red",function(event){var elem = this;var li = elem.parentNode.parentNode;console.log('st1='+elem.getAttribute("data-st1")+'st2='+elem.getAttribute("data-st2"))mui.ajax('http://....../Erp/getData?action=...',{ data:{userid:elem.getAttribute("data-st2"),//此账号的idmessageid:elem.getAttribute("data-st1"),//当前消息列表点击的id},dataType:'json',//服务器返回json格式数据type:'post',//HTTP请求类型timeout:10000,//超时时间设置为10秒；               success:function(data){//Zx_meessage(index,uid);if(data.code==200){location.reload();console.log(JSON.stringify(data)) }}, });})

所有的都阐述完毕，相信这些都还不算太难，按照上面的写，多思考两下自然就明白怎么做类似这样的需求了。废话不多说，还是附加两张效果图给你们看看如何？

注：安卓和ios苹果设备都支持兼容的，博主已完美的进行了测试，无任何问题，有兴趣的小伙伴可以学习下。若大家还有不理解的地方可以留言，希望各位每天学习一点点，下期再见…good bye！！！

H5 实现类似QQ消息列表(已读，未读)拖拽点击事件功能相关推荐

IM群聊消息的已读未读功能在存储空间方面的实现思路探讨
1.引言 IM系统中,特别是在企业应用场景下,消息的已读未读状态是一个强需求. 以阿里的钉钉为例,钉钉的产品定位是用于商务交流,其"强制已读回执"功能,让职场人无法再"假 ...
面试官：群聊消息的已读未读功能，你来设计一个?
欢迎关注方志朋的博客,回复"666"获面试宝典一朋友和我讨论他前段时间面试某大公司的一题目 : 企业IM比如企业微信.钉钉里面的群消息的有个已读未读的功能,发送者刚发出消息时,当 ...
群聊消息“已读”/“未读” 功能解决方案！
一朋友和我讨论他前段时间面试某大公司的一题目: 企业IM比如企业微信.钉钉里面的群消息的有个已读未读的功能,发送者刚发出消息时,当前群里其他群成员都是未读状态,陆陆续续有人看了这个消息,这时候消息的详 ...
面试题：群聊消息的已读未读设计
点击上方"Java之间",选择"置顶或者星标" 你关注的就是我关心的! 作者:小猿学习笔记一朋友和我讨论他前段时间面试某大公司的一题目 : 企业IM比如企业微 ...
vue+websocket+nodejs实现聊天室 - 消息已读未读
前言上一篇讲了聊天室增加一对一单聊,这次讲如何新增已读未读状态. 大概思路: 服务器返回消息列表,增加参数status为1,单聊和群聊通过过滤状态区分对应未读数量,当前聊天,直接在currentMe ...
Redis实现排行榜、延迟队列、LRU、消息已读未读（Redisson客户端实现）
目录序言 Redis客户端选型 Redis配置 Redis实现排行榜 Redis实现延迟队列 Redis LRU(Least Recently Used)使用 Redis实现消息已读未读总结序言 ...
Web聊天室消息[已读未读]的实现
聊天室快速访问继上次完成聊天室的历史记录功能后,我又想着实现聊天记录的已读未读功能.(轻喷..) 开始之前首先我看了抖音和钉钉这两款应用的消息已读未读功能的呈现效果.首先是抖音,在聊天界面,给好友 ...
大公司面试考细节，设计群聊消息的已读未读功能你说说怎么做?
一朋友和我讨论他前段时间面试某大公司的一题目 : 企业IM比如企业微信.钉钉里面的群消息的有个已读未读的功能,发送者刚发出消息时,当前群里其他群成员都是未读状态,陆陆续续有人看了这个消息,这时候消息的 ...
Android 编程下代码之（QQ消息列表滑动删除）
这份代码写出来有些时候了,一直没共享,现在把它共享给大家.简单列一下代码中你可以学到的知识点: 自定义控件的实现方式: 事件的拦截分发消费机制: QQ会话列表滑动删除原理: 最后附上源码链接:Q ...
Android开发学习之仿手机QQ消息列表侧滑删除效果
今天想和大家分享的是手机QQ消息列表侧滑删除效果,这种效果在IOS中被封装为一个列表控件,而手机QQ则是将这个功能移植到了Android上,换言之,这并非是手机QQ的独创.尽管如此,用户体验依然得到了 ...

H5 实现类似QQ消息列表(已读，未读)拖拽点击事件功能

HBulider实现消息列表，右侧滑动拖拽进行(已读，未读，删除)点击事件功能详情

H5 实现类似QQ消息列表(已读，未读)拖拽点击事件功能相关推荐

最新文章

热门文章