Add autoscroll and animate to Message frontend.
This commit is contained in:
Harry Zhou
Vendored
+48
-1
@@ -19,7 +19,7 @@
|
||||
padding-right: 1.25em;
|
||||
list-style-type: none;
|
||||
cursor: pointer;
|
||||
transition:background-color 0.2s, border-radius 0.5s;
|
||||
transition: background-color 0.2s, border-radius 0.5s, 1s;
|
||||
}
|
||||
|
||||
.con.active {
|
||||
@@ -63,4 +63,51 @@
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.message-list-item {
|
||||
transition: all 1s;
|
||||
}
|
||||
|
||||
.message-list-enter, .message-list-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.contact-list-item {
|
||||
transition: all 1s;
|
||||
}
|
||||
|
||||
.contact-list-enter, .contact-list-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.err-msg {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#message-container::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
#message-container::-webkit-scrollbar-button {
|
||||
background-color: #efefff;
|
||||
}
|
||||
|
||||
#message-container::-webkit-scrollbar-track {
|
||||
background: #efefef;
|
||||
}
|
||||
|
||||
#message-container::-webkit-scrollbar-thumb {
|
||||
background: #aaaaaa;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#message-container::-webkit-scrollbar-corner {
|
||||
background: #82AFFF;
|
||||
}
|
||||
|
||||
#message-container::-webkit-scrollbar-resizer {
|
||||
background: #efefff;
|
||||
}
|
||||
+25
-6
@@ -53,7 +53,7 @@ Vue.component('contact-list', {
|
||||
vm.loadDialog(0);
|
||||
})
|
||||
.catch(function (error) {
|
||||
vm.errorMessage = error;
|
||||
vm.errorMessage = "服务器连接失败，请检查网络QAQ";
|
||||
})
|
||||
},
|
||||
setTop: function (tops) {
|
||||
@@ -73,7 +73,7 @@ Vue.component('contact-list', {
|
||||
vm.setTop(response.data);
|
||||
})
|
||||
.catch(function (error) {
|
||||
vm.errorMessage = error;
|
||||
vm.errorMessage = "服务器连接失败，请检查网络QAQ";
|
||||
})
|
||||
},
|
||||
loadDialog: function (index) {
|
||||
@@ -99,7 +99,8 @@ Vue.component('message-dialog', {
|
||||
contact_id: null,
|
||||
isHidden: true,
|
||||
inputMessage: '',
|
||||
token: ''
|
||||
token: '',
|
||||
isLockScroll: false
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
@@ -125,6 +126,10 @@ Vue.component('message-dialog', {
|
||||
}
|
||||
}
|
||||
},
|
||||
updated: function () {
|
||||
if (!this.isLockScroll)
|
||||
this.scrollToButtom();
|
||||
},
|
||||
methods: {
|
||||
getHistoryMessage: function (contact_id) {
|
||||
var vm = this;
|
||||
@@ -132,6 +137,7 @@ Vue.component('message-dialog', {
|
||||
contact_id = this.contact_id;
|
||||
axios.get('/message/getHistoryMessage?contact_id=' + contact_id.toString() + '&page=' + (this.current_page + 1).toString())
|
||||
.then(function (response) {
|
||||
vm.isLockScroll = true;
|
||||
vm.current_page = response.data.current_page;
|
||||
vm.last_page = response.data.last_page;
|
||||
for (var i in response.data.data)
|
||||
@@ -139,7 +145,7 @@ Vue.component('message-dialog', {
|
||||
vm.isHidden = false;
|
||||
})
|
||||
.catch(function (error) {
|
||||
vm.errorMessage = error;
|
||||
vm.errorMessage = "服务器连接失败，请检查网络QAQ";
|
||||
})
|
||||
}
|
||||
else {
|
||||
@@ -151,7 +157,7 @@ Vue.component('message-dialog', {
|
||||
vm.isHidden = false;
|
||||
})
|
||||
.catch(function (error) {
|
||||
vm.errorMessage = error;
|
||||
vm.errorMessage = "服务器连接失败，请检查网络QAQ";
|
||||
})
|
||||
this.contact_id = contact_id;
|
||||
}
|
||||
@@ -160,12 +166,14 @@ Vue.component('message-dialog', {
|
||||
this.current_page = 0;
|
||||
this.last_page = null;
|
||||
this.messages = [];
|
||||
this.isLockScroll = false;
|
||||
},
|
||||
sendMessage: function () {
|
||||
var vm = this;
|
||||
vm.token = $('#token').val();
|
||||
axios.post('/message', this.postData)
|
||||
.then(function (response) {
|
||||
vm.isLockScroll = false;
|
||||
vm.messages.push(response.data.msg);
|
||||
vm.inputMessage = '';
|
||||
vm.$emit('top-contact', vm.contact_id);
|
||||
@@ -180,13 +188,21 @@ Vue.component('message-dialog', {
|
||||
{
|
||||
axios.get('/message/getNewMessage?contact_id=' + vm.contact_id.toString())
|
||||
.then(function (response) {
|
||||
vm.isLockScroll = false;
|
||||
for (var i in response.data)
|
||||
{
|
||||
vm.messages.push(response.data[i]);
|
||||
}
|
||||
})
|
||||
.catch(function (error) {
|
||||
vm.errorMessage = error;
|
||||
vm.errorMessage = "服务器连接失败，请检查网络QAQ";
|
||||
})
|
||||
}
|
||||
},
|
||||
scrollToButtom: function () {
|
||||
var c = $('#message-container');
|
||||
//console.log(c[0].scrollHeight);
|
||||
c.scrollTop(c[0].scrollHeight + 1000);
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -202,6 +218,9 @@ var Message = new Vue({
|
||||
vm.refreshContact();
|
||||
vm.refreshMessage();
|
||||
}, 5000);
|
||||
window.setTimeout(function () {
|
||||
vm.$refs.messageDialog.scrollToButtom();
|
||||
}, 3000);
|
||||
},
|
||||
loadContact: function () {
|
||||
this.$refs.contactList.$emit('loadContactEvent')
|
||||
|
||||
@@ -40,10 +40,12 @@
|
||||
<script type="text/x-template" id="contact_list">
|
||||
<div>
|
||||
{{--<a v-on:click="getNewContact">###</a>--}}
|
||||
<p v-if="errorMessage">@{{ errorMessage }}</p>
|
||||
<p class="err-msg" v-if="errorMessage">@{{ errorMessage }}</p>
|
||||
<ul>
|
||||
<table class="con-wrapper">
|
||||
<li :class="{ con: true, active: current_contact_id === contact.contact_id }" v-for="(contact, index) in contacts" v-on:click="loadDialog(index)">
|
||||
<transition-group name="contact-list" tag="ul">
|
||||
<li :class="{ con: true, active: current_contact_id === contact.contact_id }"
|
||||
v-bind:key="contact.contact_id" v-for="(contact, index) in contacts" v-on:click="loadDialog(index)">
|
||||
<tr>
|
||||
<td>
|
||||
<span>
|
||||
@@ -54,6 +56,7 @@
|
||||
<td><p class="con-name">@{{ contact.contact.nickname }}</p></td>
|
||||
</tr>
|
||||
</li>
|
||||
</transition-group>
|
||||
</table>
|
||||
</ul>
|
||||
<a v-if="hasMore" v-on:click="getHistoryContact(false)">加载更多</a>
|
||||
@@ -64,13 +67,15 @@
|
||||
<div :class="{ hide: isHidden }">
|
||||
<a v-if="hasMore" v-on:click="getHistoryMessage(0)">加载更多</a>
|
||||
<p v-else>没有更多了</p>
|
||||
<ul class="message-container">
|
||||
<li class="msg" v-for="message in messages">
|
||||
<ul id="message-container" class="message-container">
|
||||
<transition-group name="message-list" tag="ul">
|
||||
<li class="msg message-list-item" v-for="message in messages" v-bind:key="message.id">
|
||||
<img class="mavatar" :src="'/avatar/' + message.sender_id + '/64/64'"/>
|
||||
@{{ message.content }}
|
||||
</li>
|
||||
</transition-group>
|
||||
</ul>
|
||||
<p v-if="errorMessage">@{{ errorMessage }}</p>
|
||||
<p class="err-msg" v-if="errorMessage">@{{ errorMessage }}</p>
|
||||
<textarea placeholder="键入要发送的内容:" v-model="inputMessage"></textarea>
|
||||
<input type="button" class="button" value="发送" v-on:click="sendMessage"/>
|
||||
<input id="token" type="hidden" value="{{ csrf_token() }}"/>
|
||||
|
||||
Reference in New Issue
Block a user