題記
私信對(duì)話框，類似于QQ，微信等等這些社交軟件很常見的東西，但是實(shí)現(xiàn)起來卻有它自己的難度。頁面的實(shí)現(xiàn)還可以，關(guān)鍵就是下拉和上拉很自然的，感覺很不錯(cuò)。其實(shí)這都是好的，關(guān)鍵是用微信瀏覽器打開的網(wǎng)站默認(rèn)的下拉會(huì)出現(xiàn)如下情況：
是不是很煩，反正我覺得是！
解決方法
-
世紀(jì)佳緣在這個(gè)地方處理的很好，它的網(wǎng)站上有類似的需求，下拉刷新，而且在微信的內(nèi)置瀏覽器中打開也不會(huì)出現(xiàn)以上那種默認(rèn)的形式，看它的源碼，尼瑪，什么和什么呀，完全看不下去，幾千行，看你妹夫，后來才發(fā)現(xiàn)，它是把所有自定義的函數(shù)都寫在webchat_1.0.js,所以從這個(gè)著手困難太大。
世紀(jì)佳緣文件 度娘搜索了些許時(shí)間發(fā)現(xiàn)了iscroll.js這個(gè)插件。然后就瘋狂的看官網(wǎng)，然后還有一個(gè)iscroll-master文件夾，下載下來，里面全是demos，反復(fù)研究。其實(shí)這樣就夠了，但是自己沒有經(jīng)驗(yàn)的毛病就暴漏出來了，走了很多彎路。比如我自己想的把滾動(dòng)條定位到最下面的方法：
setTimeout(function(){
var scrollToTop = $("#wrapper")[0].scrollHeight;
$("#wrapper").scrollTop(scrollToTop);
},200)
這樣就會(huì)出現(xiàn)很嚴(yán)重的問題，發(fā)送信息后定位到最下面，可是下一步的時(shí)候這個(gè)可以滑動(dòng)的部分就亂了，可以直接劃到很上面的地方然就就不見了（輸入的文字）。可是demos中明明有個(gè)很明顯的scroll-to-element啊，自己當(dāng)時(shí)沒有在意這個(gè)，可是這個(gè)是解決問題的關(guān)鍵。
由于iscroll.js內(nèi)置scrollToElement函數(shù)，則：
myScroll.scrollToElement("div.mes_me:nth-last-child(1)");
其中myScroll是每次調(diào)用的時(shí)候初始化的對(duì)象。
至此基本可以解決我們現(xiàn)在的需求，那下面來談?wù)勑枨蟀伞?/p>
私信對(duì)話框需求（對(duì)話內(nèi)容部分）
- user打開私信對(duì)話框，歷史的聊天記錄全部用jinjia2渲染出來，然后自動(dòng)定位到最下面的一條消息。
-
user點(diǎn)擊輸入框，輸入內(nèi)容，輸入完之后點(diǎn)擊發(fā)送，此時(shí)將輸入框里面的內(nèi)容ajax到后臺(tái)保存，成功就將之前的內(nèi)容append到對(duì)話框里面，同時(shí)定位到最下面，如果ajax發(fā)送到后臺(tái)失敗，則alert內(nèi)容提醒。這是我們原神帶我飛的。
ajax代碼
不對(duì)，突然發(fā)現(xiàn)一個(gè)問題，我的ajax好水呀，僅僅知道這個(gè)用法，其他的很長時(shí)間沒有使用了，不行，要復(fù)習(xí)復(fù)習(xí)，做個(gè)簡書。
最后來看看現(xiàn)在的頁面效果
私信部分基本上就完成了，下面就談?wù)剛€(gè)人的學(xué)習(xí)體會(huì)。
學(xué)習(xí)體會(huì)
iscroll可以實(shí)現(xiàn)很多功能，常使用是：下拉加載和上拉刷新。這兩個(gè)功能在QQ里面非常常見吧。下面就來詳細(xì)的學(xué)習(xí)下iscroll.js。
使用方法
1.html
<div id= "wrapper">
<div id="scroller">
content
</div>
</div>
如上：id是scroller的這個(gè)div是可以滑動(dòng)的部分。
2.引入iscroll.js，自定義loaded( )函數(shù)，然后在里面將iscroll實(shí)例化，在$(document).ready()中調(diào)用loaded( )函數(shù)。
3.iscroll.js可以實(shí)現(xiàn)很多功能是在實(shí)例化中設(shè)置不同的參數(shù)。下面就簡要介紹這些參數(shù)：
- hScroll, 用來鎖定水平滾動(dòng)，默認(rèn)情況下，水平和垂直滾動(dòng)都是支持的。如果被設(shè)定為false，則不能水平方向滾動(dòng).
- vScroll, 用來鎖定垂直滾動(dòng)
- bounce, enable/disable 當(dāng)滾動(dòng)超出范圍時(shí)，是否有彈跳動(dòng)畫。
- momentum, enable/disable inertia. Default: true. 設(shè)置是否開始慣性，如果想要節(jié)省計(jì)算資源，可以設(shè)置為false。
- lockDirection, 當(dāng)元素在一個(gè)方向滾動(dòng)時(shí)(如水平)，另一個(gè)方向(如垂直)的滾動(dòng)會(huì)被鎖定。
-
fixedScrollbar：在IOS中拖動(dòng)滾動(dòng)條的時(shí)候可能會(huì)使內(nèi)容（或滾動(dòng)條，）縮小，設(shè)置該參數(shù)為true可防止該現(xiàn)象。同樣適用于Android。Android默認(rèn)為true，IOS默認(rèn)為FALSE。
參數(shù)設(shè)定
4.內(nèi)部方法
- refresh( )
iScroll需要知道滾動(dòng)區(qū)域的大小和滾動(dòng)條才可以正常的工作。在實(shí)例化的時(shí)候iScroll會(huì)自動(dòng)計(jì)算一次。但如果滾動(dòng)區(qū)域里的內(nèi)容發(fā)生變化后，需要告訴iScroll內(nèi)容發(fā)生了變化。這個(gè)很重要?。?！ - scrollTo( ) + scrollToElement + scrollToPage
scrollTo(x, y, time, relative)在time時(shí)間內(nèi)內(nèi)容滾動(dòng)的x/y距離，relative是boolean值，true表示相對(duì)現(xiàn)在的位置滑動(dòng)。
scrollToElement(element, time)在指定的時(shí)間內(nèi)內(nèi)容滑動(dòng)設(shè)定的元素位置處。
snapToPage(pageX, pageY, time)在time時(shí)間內(nèi)滑動(dòng)到設(shè)定的頁面。這一塊暫時(shí)沒需求還沒有學(xué)習(xí)，等有需求時(shí)候分分鐘秒了它。
5.注銷
由于iScroll是全局內(nèi)容，所以用完之后就要銷毀它，清楚內(nèi)存。將其設(shè)置為null就ok了。
6.幾個(gè)實(shí)例demo
注意事項(xiàng)
- 官方iscroll5下載的文件夾里面的iscroll.js實(shí)例化的對(duì)象是
IScroll,而我用的則是iScroll，,這是一個(gè)坑，我弄了好久才發(fā)現(xiàn)。這是因?yàn)榍罢呤前姹?，而后者是版本4，使用的時(shí)候不要弄混了。其實(shí)用5的那幾個(gè)實(shí)例就很簡單了，自己走彎路去網(wǎng)上找別人的文檔，人家用的是版本4的。 -
如果要實(shí)現(xiàn)下拉小菊花的效果，是在iScroll實(shí)例化中自定義一些函數(shù)。
小菊花
參考文獻(xiàn)
私信對(duì)話框其他
- qq表情是使用的jquery.qqFace.js,可以實(shí)現(xiàn)效果，但是現(xiàn)在有兩個(gè)問題：
1:每次jinjia2渲染后將圖片解析成<img src="xxx">;
2:每次點(diǎn)表情圖標(biāo)需要發(fā)送非常多的http請求，這是不合適的。
待解決...... - 關(guān)于輸入框輸入換行的時(shí)候自動(dòng)增加高度，然后會(huì)有一個(gè)max-height，這個(gè)實(shí)現(xiàn)使用的是autosize.js插件，暫時(shí)沒什么問題。
小知識(shí)補(bǔ)充：設(shè)置textarea默認(rèn)的行數(shù)可以用cols="1" rows="1",這些屬性之前一直被我忽略的。
最后說
發(fā)現(xiàn)簡書寫東西感覺太爽歪歪了，直接截圖然后粘貼就會(huì)自動(dòng)有網(wǎng)址，非常方便，而且markdown語法寫東西也很酷，所以現(xiàn)階段就準(zhǔn)備一直用簡書寫東西，等水平達(dá)到一定的高度之后，再去博客園寫博客吧。
入前端時(shí)間不到一年，還在努力提升自己中，希望可以多交同行朋友，相互學(xué)習(xí)，共同進(jìn)步。謝謝，新手寫文章，不喜勿噴，敬請指教。
人若無名，便可專心練劍。
hzhuang
2015.04.22 22.02
