私信对话框总结

题记

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

默认微信网页下拉

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

解决方法

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

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

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

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

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


    
        content

如上：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

‘Pull to refresh’ demo
‘Pull to refresh’ demo
‘Carousel’ demo
‘Custom scrollbars’ 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语法写东西也很酷，所以现阶段就准备一直用写东西，等水平达到一定的高度之后，再去博客园写博客吧。

入前端时间不到一年，还在努力提升自己中，希望可以多交同行朋友，相互学习，共同进步。谢谢，新手写文章，不喜勿喷，敬请指教。

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

hzhuang
2015.04.22 22.02