使用 jquery jroll2 开发仿qq聊天列表侧滑功能

由于开发需求，需要做一个类似qq的聊天界面，侧滑弹出单条item右侧菜单，菜单可点击，效果如下图（包括点击事件+长按事件）：

1.项目主体dom和css

页面结构比较简单，顶部header做了fixed定位。

页面主体被id="wrapper"包含，每条item有用户的头像、名字和操作btn组成。

   <header>
     聊天
   </header>
   <div id="wrapper">
     <ul id="scroller">
       <li class="item">
         <div class="item-scroller">
           <img src="data:image/01.jpg" alt="">
           <div class="txt">张三</div>
           <div class="del">
             <div class="zhiding">置顶</div>
             <div class="shanchu">删除</div>
           </div>
         </div>
       </li>
       <li class="item">
         <div class="item-scroller">
           <img src="data:image/01.jpg" alt="">
           <div class="txt">赵四</div>
           <div class="del">
             <div class="zhiding">置顶</div>
             <div class="shanchu">删除</div>
           </div>
         </div>
       </li>
     </ul>
   </div>

css部分

 /*
 http://www.cnblogs.com/ele-cat Reset Stylesheet
 v1.0.1
 2018-05-08
 Author: Ele-cat - http://ele-cat.github.io
 */
 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,figure,figcaption{padding:;margin:;}
 table {border-collapse: collapse;border-spacing:;}
 fieldset,img {border:;max-width: 100%;}
 address,caption,cite,code,dfn,em,strong,th,var {font-weight: normal;font-style: normal;}
 ol,ul {list-style: none;}
 caption,th {text-align: left;}
 h1,h2,h3,h4,h5,h6 {font-weight: normal;font-size: 100%;}
 q:before,q:after {content:'';}
 abbr,acronym {border:;font-variant:normal;}
 a{text-decoration: none;transition:all .4s ease-in-out;}
 sup,sub{vertical-align:baseline;}
 legend{color:#000;}
 input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
 input,button,textarea,select{*font-size:100%;outline:none;resize:none;}
 :-moz-placeholder {color: #ccc;}
 ::-moz-placeholder {color: #ccc;}
 input:-ms-input-placeholder,textarea:-ms-input-placeholder {color: #ccc;}
 input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {color: #ccc;}
 .fl{float: left;}
 .fr{float: right;}
 /*兼容IE6/7*/
 .cl {*zoom:;}
 .cl:before,.cl:after{display: table;line-height:;content: "";}
 .cl:after {clear: both;}

 header {
   width: 100%;
   height: 45px;
   line-height: 45px;
   background: #ececea;
   border-bottom: 1px solid #ddd;
   position: fixed;
   left:;
   top:;
   z-index:;
   text-align: center;
   color: #4e4a49;
   font-size: 1em;
 }

 #wrapper {
   width: 100%;
   padding-top: 45px;
 }

 .item {
   width: 100%;
   height: 2.8rem;
   background: #FFFFFF;
   border-bottom: 1px solid #eee;
 }

 .item-scroller {
   width: 140%;
   position: absolute;
 }

 .item-scroller img {
   width: 2rem;
   height: 2rem;
   position: absolute;
   top: 0.4rem;
   left: 0.4rem;
   border-radius: 0.4rem;
   overflow: hidden;
 }

 .item-scroller .txt {
   margin-left: 2.8rem;
   line-height: 2.8rem;
   width: 80%;
 }

 .del {
   width: 27%;
   height: 2.8rem;
   position: absolute;
   right:;
   top:;
   color: #fff;
   text-align: center;
   line-height: 2.8rem;
   z-index:;
 }

 .del .shanchu {
   width: 50%;
   height: 2.8rem;
   text-align: center;
   background: #FFB300;
   float: left;
 }

 .del .zhiding {
   width: 50%;
   height: 2.8rem;
   text-align: center;
   background: #E51C23;
   float: left;
 }

这个时候，页面已经成型。开始加入js代码。

2.js部分

（1）首先，引入jqueryCDN：

<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>

（2）引入jroll.js文件，下载地址。

使用mooc数据，先删除当前页面里的部分html代码，即删除<ul id="scroller"></ul>里的全部代码

全部js代码：

 $(function () {
       var userList = [
         {
           name: '张三',
           avatar: '01.jpg'
         },
         {
           name: '李四',
           avatar: '02.jpg'
         },
         {
           name: '王五',
           avatar: '03.jpg'
         },
         {
           name: '赵四',
           avatar: '01.jpg'
         },
         {
           name: '张三',
           avatar: '01.jpg'
         },
         {
           name: '李四',
           avatar: '02.jpg'
         },
         {
           name: '王五',
           avatar: '03.jpg'
         },
         {
           name: '赵四',
           avatar: '01.jpg'
         }
       ]
       var html = ''
       for (let i = 0; i < userList.length; i++) {
         const userInfo = userList[i];
         html += '<li class="item" onclick="intoChat(\'' + userInfo.name + '\')" ontouchend="touchend()" ontouchmove="touchend()" ontouchstart="touchstart(\'' + userInfo.name + '\')">'
         html += '  <div class="item-scroller">'
         html += '    <img src="data:image/' + userInfo.avatar + '" alt="">'
         html += '    <div class="txt">' + userInfo.name + '</div>'
         html += '    <div class="del">'
         html += '      <div class="zhiding" onclick="upChat(\'' + userInfo.name + '\')">置顶</div>'
         html += '      <div class="shanchu" onclick="delChat(\'' + userInfo.name + '\')">删除</div>'
         html += '    </div>'
         html += '  </div>'
         html += '</li>'
       }
       $('#scroller').append(html)
       jroll(); // 调用jroll
     })

     function jroll() {
       // 创建外层jroll实例
       var jroll = new JRoll("#wrapper", {
         scrollBarY: false
       });
       var items = document.querySelectorAll(".item");
       var current = null;
       //保存当前滑开的item
       for (var i = 0; i < items.length; i++) {
         // 每行创建jroll实例
         var j = new JRoll(items[i], {
           scrollX: true,
           bounce: false
         });
         j.on("scrollStart", function () {
           if (current && current !== this) {
             current.scrollTo(0, 0, 100);
             current = null;
           }
         });
         j.on("scroll", function (e) {
           if (this.x === 0 && !current) {
             this.call(jroll, e);
           } else {
             current = this;
           }
         });
         j.on("scrollEnd", function () {
           if (this.x > -50) {
             this.scrollTo(0, 0, 100);
             current = null;
           } else {
             this.scrollTo(this.maxScrollX, 0, 100);
           }
         })
       };
     }

     // 点击操作
     function intoChat(name) {
       alert('点击"' + name + '"进行聊天')
     }

     // 删除操作
     function delChat(name) {
       alert('点击"' + name + '"删除聊天')
     }

     // 置顶操作
     function upChat(name) {
       alert('点击"' + name + '"置顶聊天')
     }

     // 长按操作
     function getTimeNow() {
       var now = new Date();
       return now.getTime();
     }
     function touchend() {
       clearInterval(time); //如果按下时间不到1000毫秒便弹起，
     }
     function touchstart(name) {
       timeStart = getTimeNow(); //获取鼠标按下时的时间
       time = setInterval(function () {
         timeEnd = getTimeNow(); //也就是每100毫秒获取一次时间
         if (timeEnd - timeStart > 700) //如果此时检测到的时间与第一次获取的时间差有1000毫秒
         {
           alert('长按"' + name + '"进行操作')
           clearInterval(time); //便不再继续重复此函数 （clearInterval取消周期性执行）
         }
       }, 100);
     }

补充一、头像资源：

分别是01.jpg 02.jpg 03.jpg。

补充二、当我们点击右侧划出菜单时，需要阻止冒泡事件，代码如下：

     // 删除操作
     function delChat(name, e) {
       //如果提供了事件对象，则这是一个非IE浏览器
       if (e && e.preventDefault) {
         //阻止默认浏览器动作(W3C)
         e.preventDefault();
       }
       else {
         //IE中阻止函数器默认动作的方式
         window.event.returnValue = false;
         return false;
       }
       alert('点击"' + name + '"删除聊天')
     }

     // 置顶操作
     function upChat(name, e) {
       //如果提供了事件对象，则这是一个非IE浏览器
       if (e && e.preventDefault) {
         //阻止默认浏览器动作(W3C)
         e.preventDefault();
       }
       else {
         //IE中阻止函数器默认动作的方式
         window.event.returnValue = false;
         return false;
       }
       alert('点击"' + name + '"置顶聊天')
     }

补充三、重要部分都做了代码注释，有问题的话，可以在留言区评论。

补充四、下图使用 jquery 开发用户通讯录，可访问博客