需求：聊天功能（效果參照微信聊天）
直接先放效果圖吧！
框架： wepy (vue)
主要思路：
1、布局只編寫一個消息組件，包括頭像和內容兩部分！flex布局（左到右row），對方發來的消息正常顯示，我方發出去的消息右到左布局（flex-direction: row-reverse;），這樣增加了消息組件的復用！如圖消息組件：
2、消息數據全部存儲在一個Array中，demo如圖：text為消息內容、isMine判斷該消息來自於對方還是我自己，從而動態消息item的CSS布局（左到右或右到左）
3、底部input，綁定實時監聽屬性 bindinput，失焦事件會有一點小bug，效果不是很好，value值綁定data中userInputContent，作為發送按鈕的發送數據。
4、獲取input值和點擊發送按鈕方法如下圖，不管是服務器拉取的對方的消息，還是我們自己發送的消息，都在這個數組內存儲。至於為啥要 unshift 反向壓入而不是 push 進去？答案往下看吶
5、以上步驟基本可以實現聊天功能demo了，但是有個瑕疵！自己發送的消息，在超過一屏的高度后，發送出去的消息會在屏幕可視區域下方，需要手動滑動才可以看到，想要那種一發送消息就在最底部出現的效果，思路有很多，
比如:把屏幕自動拉倒最底部等等，我的解決辦法是：負負得正！flex布局中消息item可以左到右和右到左來布局對方和我的消息框，即對方頭像在左，內容在右，我的則反過來。同理：消息要動態顯示在最底部，把消息Box的flex布局變為下到上，如圖msgBox的布局，這樣第一條消息會顯示在最下方。我們再把消息數組反向壓入數據 UNshift，得到負負得正的效果，就實現了我們發出的消息永遠在屏幕最底部。
碼字不已，有更好的方法可以一起交流！
再補充一點，最近有童鞋私聊我說消息怎么一加載列表就要自動滑到最底部？如同微信聊天那樣，點擊進去，展示的是最新的最底部的消息，例如一屏幕假設最多放10條消息，我有50條消息，點進來展示的是最新的第50條消息並且在屏幕最下端，我的解決思路是在onload時，根據消息數量和高度，讓屏幕往下滑一定距離即可，No nonsense， code it
pageScrollToBottom( msgLength ) { wx.createSelectorQuery().select('#contentBox').boundingClientRect(function(rect){ // 使頁面滾動到底部 log('rect', rect) wx.pageScrollTo({ scrollTop: rect.bottom + msgLength*60, duration: 80 }) log('msgBox的下邊界坐標： ', msgLength ) }).exec() }
以上這個函數在onload時可以調用，保證了進來后就是最底部，（當然得根據自己業務邏輯改動下，比如id，高度等），但是這樣弄完后還會存在一個問題，就是ios端發送消息會遮住最后一個消息，安卓卻不會有，為啥呢？？？？我也不知道，難道是ios對flex的支持沒有安卓的全面？先不管，有問題先解決問題，既然遮住了，那么我們每次發送完消息后就在次調用上面的函數不就行了嗎
this.pageScrollToBottom( this.msgLength + 1 );
OK