打造一款类似qq聊天的界面

目录
  1. 题记
  2. 解决方法
  3. 私信对话框需求（对话内容部分）
  4. 学习体会
    1. 使用方法
  5. 注意事项
  6. 参考文献
  7. 私信对话框其他
  8. 最后说
  • 补充
  • qq表情打造
  • autosize.js的bug修复

    • 题记

    私信对话框，类似于QQ，微信等等这些社交软件很常见的东西，但是实现起来却有它自己的难度。页面的实现还可以，关键就是下拉和上拉很自然的，感觉很不错。其实这都是好的，关键是用微信浏览器打开的网站默认的下拉会出现如下情况：

    默认微信网页下拉

    是不是很烦，反正我觉得是！

    解决方法

    • 世纪佳缘在这个地方处理的很好，它的网站上有类似的需求，下拉刷新，而且在微信的内置浏览器中打开也不会出现以上那种默认的形式，看它的源码，尼玛，什么和什么呀，完全看不下去，几千行，看你妹夫，后来才发现，它是把所有自定义的函数都写在webchat_1.0.js,所以从这个着手困难太大。
      世纪佳缘文件

    • 度娘搜索了些许时间发现了iscroll.js这个插件。然后就疯狂的看官网，然后还有一个iscroll-master文件夹，下载下来，里面全是demos，反复研究。其实这样就够了，但是自己没有经验的毛病就暴漏出来了，走了很多弯路。比如我自己想的把滚动条定位到最下面的方法：

      1
      2
      3
      4
      setTimeout(function(){
          var scrollToTop = $("#wrapper")[0].scrollHeight;
          $("#wrapper").scrollTop(scrollToTop);
      },200)

    这样就会出现很严重的问题，发送信息后定位到最下面，可是下一步的时候这个可以滑动的部分就乱了，可以直接划到很上面的地方然就就不见了（输入的文字）。可是demos中明明有个很明显的scroll-to-element啊，自己当时没有在意这个，可是这个是解决问题的关键。
    由于iscroll.js内置scrollToElement函数，则：

    1
    myScroll.scrollToElement("div.mes_me:nth-last-child(1)");

    其中myScroll是每次调用的时候初始化的对象。
    demos

    至此基本可以解决我们现在的需求，那下面来谈谈需求吧。

    私信对话框需求（对话内容部分）

    • user打开私信对话框，历史的聊天记录全部用jinjia2渲染出来，然后自动定位到最下面的一条消息。
    • user点击输入框，输入内容，输入完之后点击发送，此时将输入框里面的内容ajax到后台保存，成功就将之前的内容append到对话框里面，同时定位到最下面，如果ajax发送到后台失败，则alert内容提醒。这是我们原神带我飞的。
      ajax代码

    不对，突然发现一个问题，我的ajax好水呀，仅仅知道这个用法，其他的很长时间没有使用了，不行，要复习复习，做个简书。

    最后来看看现在的页面效果
    下拉ok

    私信部分基本上就完成了，下面就谈谈个人的学习体会。

    学习体会

    iscroll可以实现很多功能，常使用是：下拉加载和上拉刷新。这两个功能在QQ里面非常常见吧。下面就来详细的学习下iscroll.js。

    使用方法

    1.html

    1
    2
    3
    4
    5
    <div id= "wrapper">
        <div id="scroller">
            content
        </div>
    </div>

    如上：id是scroller的这个div是可以滑动的部分。

    2.引入iscroll.js，自定义loaded( )函数，然后在里面将iscroll实例化，在$(document).ready()中调用loaded( )函数。
    实例化

    3.iscroll.js可以实现很多功能是在实例化中设置不同的参数。下面就简要介绍这些参数：

    • hScroll, 用来锁定水平滚动，默认情况下，水平和垂直滚动都是支持的。如果被设定为false，则不能水平方向滚动.
    • vScroll, 用来锁定垂直滚动
    • bounce, enable/disable 当滚动超出范围时，是否有弹跳动画。
    • momentum, enable/disable inertia. Default: true. 设置是否开始惯性，如果想要节省计算资源，可以设置为false。
    • lockDirection, 当元素在一个方向滚动时(如水平)，另一个方向(如垂直)的滚动会被锁定。
    • fixedScrollbar：在IOS中拖动滚动条的时候可能会使内容（或滚动条，）缩小，设置该参数为true可防止该现象。同样适用于Android。Android默认为true，IOS默认为FALSE。
      参数设定

    4.内部方法

    • refresh( )
      iScroll需要知道滚动区域的大小和滚动条才可以正常的工作。在实例化的时候iScroll会自动计算一次。但如果滚动区域里的内容发生变化后，需要告诉iScroll内容发生了变化。这个很重要！！！
    • scrollTo( ) + scrollToElement + scrollToPage
      scrollTo(x, y, time, relative)在time时间内内容滚动的x/y距离，relative是boolean值，true表示相对现在的位置滑动。
      scrollToElement(element, time)在指定的时间内内容滑动设定的元素位置处。
      snapToPage(pageX, pageY, time)在time时间内滑动到设定的页面。这一块暂时没需求还没有学习，等有需求时候分分钟秒了它。

    5.注销
    由于iScroll是全局内容，所以用完之后就要销毁它，清楚内存。将其设置为null就ok了。

    6.几个实例demo

    注意事项

    • 官方iscroll5下载的文件夹里面的iscroll.js实例化的对象是IScroll,而我用的则是iScroll，,这是一个坑，我弄了好久才发现。这是因为前者是版本5，而后者是版本4，使用的时候不要弄混了。其实用5的那几个实例就很简单了，自己走弯路去网上找别人的文档，人家用的是版本4的。
    • 如果要实现下拉小菊花的效果，是在iScroll实例化中自定义一些函数。
      小菊花

      参考文献

    • iScroll.js 用法参考 （share）
    • 移动设备web开发插件iScroll的使用详解

    私信对话框其他

    • qq表情是使用的jquery.qqFace.js,可以实现效果，但是现在有两个问题：
      1:每次jinjia2渲染后将图片解析成;
      2:每次点表情图标需要发送非常多的http请求，这是不合适的。
      待解决……
    • 关于输入框输入换行的时候自动增加高度，然后会有一个max-height，这个实现使用的是autosize.js插件，暂时没什么问题。
      小知识补充：设置textarea默认的行数可以用cols="1" rows="1",这些属性之前一直被我忽略的。

    最后说

    发现简书写东西感觉太爽歪歪了，直接截图然后粘贴就会自动有网址，非常方便，而且markdown语法写东西也很酷，所以现阶段就准备一直用简书写东西，等水平达到一定的高度之后，再去博客园写博客吧。

    入前端时间不到一年，还在努力提升自己中，希望可以多交同行朋友，相互学习，共同进步。

    人若无名，便可专心练剑。

    补充

    之前部分是简书po过来的，但是在这个基础上实现完美的界面还是做了一些必要的优化。

    • 打造qq表情，高仿真版本。(原神打造)
    • 修复加入表情的时候textarea也会自动高度的bug

    qq表情打造

    这个是原神花了一天的时间通过兴趣部落，然后chrome上手机模拟打开然后研究代码实现出来的。大赞一下。
    原文文章

    autosize.js的bug修复

    1
    2
    3
    //在表情插入到textarea中之后执行
    var ta = document.querySelector('textarea');
    autosize.update(ta);

    autosize.js插件官网