vue,一路走來（9）--聊天窗口

閑暇時間，介紹一下我做一個聊天窗口的心得。如圖：

首先要考慮的是得判斷出是自己的信息還是對方發來的信息，給出如圖的布局，切換不同的類。

<li class="clearfix" v-for="(talk,index) in talks" v-bind:class="{'even':othername!=talk.send_from_id,'odd':othername==talk.send_from_id}">
   <span v-show="showTime(index)" :id="index">{{getLocalTime(talk.message_time)}}</span>
   <img v-bind:src="getUserimg" alt="" v-if="othername!=talk.send_from_id">
   <img v-bind:src="meUserimg" alt="" v-else>
   <b></b>
   <div>
      <p>{{talk.content}}</p>
   </div>
</li>

/*even 偶  odd 奇*/
.content-talk ul li.odd img{width:45px;height:45px;border-radius: 50%;float: left;background: url(../assets/peoper.png) no-repeat center center;background-size: 45px 45px;}
.content-talk ul li.even img{width:45px;height:45px;border-radius: 50%;float: right;background: url(../assets/peoper.png) no-repeat center center;background-size: 45px 45px;}
.content-talk ul li.odd .in_talk p{background: #fff;float:left;margin-left: 10px;max-width:60%;font-size: 14px;padding:10px;border-radius: 6px;}
.content-talk ul li.odd b{width:8px;height:14px;display: inline-block;background: url(../images/left.jpg) no-repeat;background-size: 8px 14px;position: absolute;left:58px;top:8px;}
.content-talk ul li.even .in_talk p{background: #f6fff6;float:right;margin-right: 10px;max-width:60%;border-radius: 6px;font-size: 14px;padding:10px;
}
.content-talk ul li.even b{width:8px;height:14px;display: inline-block;background: url(../images/right.jpg) no-repeat;background-size: 8px 14px;position: absolute;right:58px;top:8px;}

或許你會看得一臉懵，根據接口拿到的信息，othername就是當前與你聊天的這個人，如果與send_from_id一致那么就是對方的信息，反之是你自己發的信息。

 

接下來就是輸入框了，定位在底部，因為沒有發送按鈕，所以必須觸發鍵盤和手機的Enter鍵，還有一個問題是，在我手機Enter鍵顯示的是'換行'字眼。

以下是解決辦法，加了form標簽，但必須關掉action的功能。“換行”就變成“前往”

<form action=""  onkeydown="if(event.keyCode==13)return false;">
      <mt-field type="text" v-model="content" @keyup.native="send($event)"></mt-field>
</form>

//發送消息
send(ev){
   if(ev.keyCode==13){ 
     var sendtoid=this.userid;
     // console.log(sendtoid)
     var sendfromid="";
     var subject="";
     var replyid=0;
     if(this.content!=''){
         this.$http.post(this._getUrl()+"User/send",
         {"sendfromid":sendfromid,"sendtoid":sendtoid,"subject":subject,"content":this.content,"replyid":replyid},{emulateJSON:true}
          ).then((response) => {
              response = response.body;
              if(response.error_code==200){
                 Toast({
                    message: '發送成功'
                 });
                 this.getread(); //重新獲取數據
                  this.content=''
              }
              else{
                 Toast({
                    message: response.error_msg
                 });
              }
          });
     }else{
         Toast({
             message: '不能為空'
         });
     }
   }
},

 接下來我用到了Mint-ui的Loadmore  頂部下拉刷新加載更多消息  

http://mint-ui.github.io/docs/#/zh-cn2/loadmore

接口數據，如圖：

在 loadTop()函數加載更多中，不能再用push()。

如下這3張圖可能形象一點，created(),獲取到第一頁數據

 第一頁數據：

第二頁數據：

首先得讓第二頁最底下的數據先添加進來，用了for循環 for(let j = sayLists.length-1; j >-1; j--)  數組序號index從0開始,

然后數據就需要使用unshift() 方法向數組的開頭添加元素，於是用了下面方法：

     //加載更多
          loadTop() {
             // var userid=this.$route.params.userid;
             let page = (Math.ceil(this.talks.length/this.pagesize))+ 1;
            // console.log(page)
                  this.$http.get(this._getUrl()+"User/readAll/userid/" + this.userid +"/pagesize/"+this.pagesize+"/page/" + page).then((response) => {
                        let say_code =response.body.error_code;
                        let sayLists = response.body.list;
                        if(say_code=='200'){
                          for (let j = sayLists.length-1; j >-1; j--) { 
                             // console.log(sayLists[j])
                             this.talks.unshift(sayLists[j]);
                             this.contentlogin=true;
                           }
                        }else{
                          this.allLoaded = true;
                          this.$refs.loadmore.onTopLoaded();
                          this.contentlogin=false;
                        }
                  });
          },

最后的問題是，頁面進來顯示最新聊天，在body底部。

//顯示最底部信息
            bottomshow(){
                let count=0;
                let interval=setInterval(() =>{
                  if(count>200){
                    clearInterval(interval);
                  }
                  count++;
                  if(document.body.scrollTop != document.body.scrollHeight){
                    document.body.scrollTop = document.body.scrollHeight;
                // console.log(document.body.scrollTop)
                  }
                  if(document.body.scrollTop == document.body.scrollHeight){
                     clearInterval(interval);
                  }
                },0);
            }

加上定時器，是因為頁面一進來未能獲取到盒子高度並發生滾動，所以加了定時器，利用count++，延遲點。