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

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

  1. 首先第一步列表界面,并且列表上添加一个显示消息的标注;如:mui-badge;
  2. 对列表滑动拖拽事件;
  3. 拖拽事件上的标签进行监听以及逻辑的判断处理;
  4. 此功能牵涉到底部导航栏,类似QQ,底部会显示未读消息的总数;
  5. 通过事件的监听到总数,再进行本地存储,传给底部选项卡的标注处显示;
  6. 点击已读,消息列表总数-1,点击“标为未读”消息列表+1;
  7. 处理方法公式:总数=总数+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="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+1
                            divs+='<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)//要已读就传1
                        li.getElementsByTagName("span")[0].classList.add('mui-hidden');
                        elem.innerHTML='标为已读'  
                        localStorage.setItem('jiaobiao',localStorage.getItem('jiaobiao')-1);
                    }else{
                        bjyd(elem.getAttribute("data-st1"),0)//未读传0
                        li.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"),//此账号的id
                        messageid: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!!!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值