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

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

1.项目主体dom和css

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

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

 1   <header>
 2     聊天
 3   </header>
 4   <div id="wrapper">
 5     <ul id="scroller">
 6       <li class="item">
 7         <div class="item-scroller">
 8           <img src="image/01.jpg" alt="">
 9           <div class="txt">张三</div>
10           <div class="del">
11             <div class="zhiding">置顶</div>
12             <div class="shanchu">删除</div>
13           </div>
14         </div>
15       </li>
16       <li class="item">
17         <div class="item-scroller">
18           <img src="image/01.jpg" alt="">
19           <div class="txt">赵四</div>
20           <div class="del">
21             <div class="zhiding">置顶</div>
22             <div class="shanchu">删除</div>
23           </div>
24         </div>
25       </li>
26     </ul>
27   </div>

css部分

  1 /* 
  2 http://www.cnblogs.com/ele-cat Reset Stylesheet
  3 v1.0.1 
  4 2018-05-08
  5 Author: Ele-cat - http://ele-cat.github.io
  6 */
  7 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: 0;margin: 0;}
  8 table {border-collapse: collapse;border-spacing: 0;}
  9 fieldset,img {border: 0;max-width: 100%;}
 10 address,caption,cite,code,dfn,em,strong,th,var {font-weight: normal;font-style: normal;}
 11 ol,ul {list-style: none;}
 12 caption,th {text-align: left;}
 13 h1,h2,h3,h4,h5,h6 {font-weight: normal;font-size: 100%;}
 14 q:before,q:after {content:'';}
 15 abbr,acronym {border: 0;font-variant:normal;}
 16 a{text-decoration: none;transition:all .4s ease-in-out;}
 17 sup,sub{vertical-align:baseline;}
 18 legend{color:#000;}
 19 input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
 20 input,button,textarea,select{*font-size:100%;outline:none;resize:none;}
 21 :-moz-placeholder {color: #ccc;}
 22 ::-moz-placeholder {color: #ccc;}
 23 input:-ms-input-placeholder,textarea:-ms-input-placeholder {color: #ccc;}
 24 input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {color: #ccc;}
 25 .fl{float: left;}
 26 .fr{float: right;}
 27 /*兼容IE6/7*/
 28 .cl {*zoom: 1;} 
 29 .cl:before,.cl:after{display: table;line-height: 0;content: "";} 
 30 .cl:after {clear: both;}
 31 
 32 header {
 33   width: 100%;
 34   height: 45px;
 35   line-height: 45px;
 36   background: #ececea;
 37   border-bottom: 1px solid #ddd;
 38   position: fixed;
 39   left: 0;
 40   top: 0;
 41   z-index: 99;
 42   text-align: center;
 43   color: #4e4a49;
 44   font-size: 1em;
 45 }
 46 
 47 #wrapper {
 48   width: 100%;
 49   padding-top: 45px;
 50 }
 51 
 52 .item {
 53   width: 100%;
 54   height: 2.8rem;
 55   background: #FFFFFF;
 56   border-bottom: 1px solid #eee;
 57 }
 58 
 59 .item-scroller {
 60   width: 140%;
 61   position: absolute;
 62 }
 63 
 64 .item-scroller img {
 65   width: 2rem;
 66   height: 2rem;
 67   position: absolute;
 68   top: 0.4rem;
 69   left: 0.4rem;
 70   border-radius: 0.4rem;
 71   overflow: hidden;
 72 }
 73 
 74 .item-scroller .txt {
 75   margin-left: 2.8rem;
 76   line-height: 2.8rem;
 77   width: 80%;
 78 }
 79 
 80 .del {
 81   width: 27%;
 82   height: 2.8rem;
 83   position: absolute;
 84   right: 0;
 85   top: 0;
 86   color: #fff;
 87   text-align: center;
 88   line-height: 2.8rem;
 89   z-index: 9999;
 90 }
 91 
 92 .del .shanchu {
 93   width: 50%;
 94   height: 2.8rem;
 95   text-align: center;
 96   background: #FFB300;
 97   float: left;
 98 }
 99 
100 .del .zhiding {
101   width: 50%;
102   height: 2.8rem;
103   text-align: center;
104   background: #E51C23;
105   float: left;
106 }

View Code