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

SilenceSea 2018-08-03 阅读


1.项目主体dom和css

QQ侧滑效果
页面结构比较简单,顶部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);
    }

补充(1):头像资源:
头像头像头像
分别是01.jpg 02.jpg 03.jpg。
补充(2):当我们点击右侧划出菜单时,需要阻止冒泡事件,代码如下:

 

// 删除操作
    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 + '"置顶聊天')
    }

来源:本站原创

声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。