v0.1

src/components/load/moreDot.vue

+
+<template>
+    <div class="spinner">
+      <div class="bounce1"></div>
+      <div class="bounce2"></div>
+      <div class="bounce3"></div>
+    </div>
+</template>
+
+<style lang="stylus" scoped>
+   .spinner {
+      margin: 10px auto 0;
+      width: 150px;
+      text-align: center;
+    }
+     
+    .spinner > div {
+      width: 30px;
+      height: 30px;
+      background-color: #c3c3c3;
+     
+      border-radius: 100%;
+      display: inline-block;
+      -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
+      animation: bouncedelay 1.4s infinite ease-in-out;
+      /* Prevent first frame from flickering when animation starts */
+      -webkit-animation-fill-mode: both;
+      animation-fill-mode: both;
+    }
+     
+    .spinner .bounce1 {
+      -webkit-animation-delay: -0.32s;
+      animation-delay: -0.32s;
+    }
+     
+    .spinner .bounce2 {
+      -webkit-animation-delay: -0.16s;
+      animation-delay: -0.16s;
+    }
+     
+    @-webkit-keyframes bouncedelay {
+      0%, 80%, 100% { -webkit-transform: scale(0.0) }
+      40% { -webkit-transform: scale(1.0) }
+    }
+     
+    @keyframes bouncedelay {
+      0%, 80%, 100% {
+        transform: scale(0.0);
+        -webkit-transform: scale(0.0);
+      } 40% {
+        transform: scale(1.0);
+        -webkit-transform: scale(1.0);
+      }
+    }
+</style>

src/components/message/message.vue

@@ -7,7 +7,9 @@
             </header>
             <div class="message-wrapper" ref="list">
                 <ul v-if="selectedChat">
-                    <li v-for="item in messages" class="message-item">
+                    <Load v-if="isSelectMore"/>
+                    <template v-for="item in messages">
+                        <li   :class="['dnf'+item.id, 'message-item']">
                             <div v-if="item.type==1" class="main" :class="{ self: item.isSend }">
                                 <img class="avatar" width="36" height="36" :src="item.isSend ? user.img : selectedChat.user.img||'static/images/weixin.jpg'" />
                                 <div class="time"><span>{{item.createTime | time}}</span></div>
@@ -24,6 +26,7 @@
                                 </div>
                             </div>
                         </li>
+                    </template>
                 </ul>
             </div>
         </div>
@@ -34,12 +37,18 @@
 import moment from 'moment'
 import { panelStatus } from '@/utils/common'
 import { mapGetters, mapState, mapActions } from 'vuex'
+import Load from '../load/moreDot'
 export default {
     data(){
         return {
-            imgUrl:process.env.IMG_ADDRESS
+            imgUrl:process.env.IMG_ADDRESS,
+            headerId:0,
+            loadStatus:false,
         }
     },
+    components: {
+         Load
+    },
     computed: {
         selectId(){
             return  this.$store.state.user.selectId
@@ -49,7 +58,8 @@ export default {
         },
         ...mapGetters([
             'selectedChat',
-            'messages'
+            'messages',
+            'isSelectMore'
         ]),
         ...mapState([
             'user'
@@ -58,7 +68,6 @@ export default {
     mounted() {
         let temp = this
         this.$refs.list.onscroll = function () {
-            console.log(this.scrollTop)
             if(this.scrollTop ==0){
                 temp.moreMessage()
             }
@@ -68,18 +77,40 @@ export default {
     },
     watch: {
         selectId() {
-            console.log(44444444)
-          setTimeout(() => this.$refs.list.scrollTop = this.$refs.list.scrollHeight, 0)
         },
         messages(val, old){
-            console.log(val,old)
-            console.log(66666666666666666666666)
-            if(old.length+1==val.length){
+            if(!val||val.length==0){
+                return
+            }
+            if(!old||old.length==0){
+                setTimeout(() => this.$refs.list.scrollTop = this.$refs.list.scrollHeight, 0)
+            }else if(val[0].conversationId!=old[0].conversationId){
                 setTimeout(() => this.$refs.list.scrollTop = this.$refs.list.scrollHeight, 0)
             }
-            if((val.length-old.length)>5){
-                setTimeout(() => this.$refs.list.scrollTop = ~~this.$refs.list.scrollHeight-2000, 0)
+            if(this.headerId != val[val.length-1].conversationId){
+                setTimeout(() => this.$refs.list.scrollTop = this.$refs.list.scrollHeight, 0)
+            }else{
+                this.$refs.list.scrollTop= 140
+                // }
+                // let liArray = this.$refs.list.children[0].children
+                // let index = val.length - old.length
+                // console.log('------------------------=======================')
+                // console.log(index)
+                // for(let li of liArray){
+                //     if(li.className.split(' ')[0] == 'dnf'+val[index].id){
+                //         this.$refs.list.scrollTop = li.scrollHeight*9
+                //     }
+                // }
             }
+            this.headerId = val[0].conversationId
+            
+            // console.log(66666666666666666666666)
+            // if(old.length+1==val.length){
+            //     setTimeout(() => this.$refs.list.scrollTop = this.$refs.list.scrollHeight, 0)
+            // }
+            // if((val.length-old.length)>5){
+            //     setTimeout(() => this.$refs.list.scrollTop = ~~this.$refs.list.scrollHeight-2000, 0)
+            // }
         }
     },
     methods: {

src/store/getters.js

@@ -23,6 +23,9 @@ const getters = {
     messages (state) {
       let session = state.user.chartings.find(session => session.id === state.user.selectId);
       return session&&session.messages
+    },
+    isSelectMore(state){
+      return state.user.isSelectMore
     }
 }
 export default getters
\ No newline at end of file

src/store/modules/user.js

@@ -21,6 +21,7 @@ const user = {
     tempSearchChatlist:[],
     tempChatlist:[],
     emojis,
+    isSelectMore:false,
     selectId: 1,
     selectFriendId: 0
   },
@@ -40,6 +41,9 @@ const user = {
             state.whichPane = value
         }
     },
+    CHANGE_ISSELECTMORE(state,value){
+        state.isSelectMore = value
+    },
     SET_WXOBJECT(state, value){
         state.wsObject = value
     },
@@ -175,6 +179,8 @@ const user = {
         console.log(data)
       })
       .on('messages/index', (data, callback) => {
+        console.log(45454545454545454)
+        commit('CHANGE_ISSELECTMORE',false)
         callback(true)
         data&&commit('ADD_MESSAGE', data)
         !data&&state.messagesPage--
@@ -232,10 +238,11 @@ const user = {
                 }
             }
         }
-        commit('SELECT_SEESION', conversation)
         
+        commit('SELECT_SEESION', conversation)
     },
     selectMessage({ commit, state }, message){
+        commit('CHANGE_ISSELECTMORE',true)
         state.wsObject.emit('appevent', {
             eventType: 'messages/index',
             message