使用 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="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="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: 0;margin: 0;}
table {border-collapse: collapse;border-spacing: 0;}
fieldset,img {border: 0;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: 0;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: 1;} 
.cl:before,.cl:after{display: table;line-height: 0;content: "";} 
.cl:after {clear: both;}

header {
  width: 100%;
  height: 45px;
  line-height: 45px;
  background: #ececea;
  border-bottom: 1px solid #ddd;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
  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: 0;
  top: 0;
  color: #fff;
  text-align: center;
  line-height: 2.8rem;
  z-index: 9999;
}

.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="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 开发用户通讯录，可访问博客