From bcedc39efa30c72b3ff99d95faa52980ed62ac70 Mon Sep 17 00:00:00 2001 From: zyronon Date: Mon, 25 Oct 2021 00:09:05 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 14 +++--- src/pages/message/AllMessage.vue | 2 +- src/pages/message/Message.vue | 6 --- src/pages/message/chat/Chat.vue | 25 +++++++---- src/pages/test/TestKeepAlive.vue | 51 ++++++++++++++++++++++ src/pages/test/TestKeepAlivePage1.vue | 41 +++++++++++++++++ src/pages/test/{Test6.vue => TestVue3.vue} | 0 src/router/index.js | 51 ++++++++++++++-------- src/utils/global-methods.jsx | 3 +- 9 files changed, 149 insertions(+), 44 deletions(-) create mode 100644 src/pages/test/TestKeepAlive.vue create mode 100644 src/pages/test/TestKeepAlivePage1.vue rename src/pages/test/{Test6.vue => TestVue3.vue} (100%) diff --git a/src/App.vue b/src/App.vue index f9f3ebd..f8899d7 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,13 +1,10 @@ @@ -36,6 +33,7 @@ export default { // watch $route 决定使用哪种过渡 watch: { '$route'(to, from) { + console.log(to) this.$store.commit('setMaskDialog', {state: false, mode: this.maskDialogMode}) //footer下面的5个按钮，对跳不要用动画 diff --git a/src/pages/message/AllMessage.vue b/src/pages/message/AllMessage.vue index 242bbc1..029c5aa 100644 --- a/src/pages/message/AllMessage.vue +++ b/src/pages/message/AllMessage.vue @@ -125,7 +125,7 @@ import resource from "../../assets/data/resource.js"; export default { - name: "Fans", + name: "AllMessage", components: { Scroll, People, diff --git a/src/pages/message/Message.vue b/src/pages/message/Message.vue index 36a3360..8a8b751 100644 --- a/src/pages/message/Message.vue +++ b/src/pages/message/Message.vue @@ -480,12 +480,6 @@ export default { // this.isShowRecommend = true }, 1000) }, - activated() { - console.log('activated') - }, - deactivated() { - console.log('deactivated') - }, methods: { async loadRecommendData() { if (this.loading) return diff --git a/src/pages/message/chat/Chat.vue b/src/pages/message/chat/Chat.vue index 9c5f625..d617516 100644 --- a/src/pages/message/chat/Chat.vue +++ b/src/pages/message/chat/Chat.vue @@ -14,7 +14,7 @@
+ v-for="(item,index) in messages" :key="item">
@@ -32,7 +32,8 @@ - @@ -470,12 +471,21 @@ export default { created() { }, mounted() { - nextTick(() => { - let wrapper = this.$refs.msgWrapper - wrapper.scrollTo({top: wrapper.scrollHeight - wrapper.clientHeight}) - }) + + }, + activated() { + this.scrollBottom() }, methods: { + scrollBottom() { + nextTick(() => { + let wrapper = this.$refs.msgWrapper + console.log('wrapper.clientHeight', wrapper.clientHeight) + console.log('wrapper.scrollHeight', wrapper.scrollHeight) + wrapper.scrollTo({top: wrapper.scrollHeight - wrapper.clientHeight}) + }) + + }, openRedPacket() { this.opening = true setTimeout(() => { @@ -542,11 +552,9 @@ export default { font-size: 1.4rem; .chat-content { - .header { z-index: 2; background: @main-bg; - position: fixed; width: 100%; box-sizing: border-box; height: @header-height; @@ -582,7 +590,6 @@ export default { .message-wrapper { height: calc(100vh - 12.5rem); overflow: auto; - padding-top: 6rem; &.expand { height: calc(100vh - (12.5rem + 30vh)); diff --git a/src/pages/test/TestKeepAlive.vue b/src/pages/test/TestKeepAlive.vue new file mode 100644 index 0000000..5e2f3a5 --- /dev/null +++ b/src/pages/test/TestKeepAlive.vue @@ -0,0 +1,51 @@ + + + diff --git a/src/pages/test/TestKeepAlivePage1.vue b/src/pages/test/TestKeepAlivePage1.vue new file mode 100644 index 0000000..d77eb08 --- /dev/null +++ b/src/pages/test/TestKeepAlivePage1.vue @@ -0,0 +1,41 @@ + + + + diff --git a/src/pages/test/Test6.vue b/src/pages/test/TestVue3.vue similarity index 100% rename from src/pages/test/Test6.vue rename to src/pages/test/TestVue3.vue diff --git a/src/router/index.js b/src/router/index.js index cf67eb6..ee2e3dd 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -68,8 +68,10 @@ import TaskNotice from "../pages/message/notice/TaskNotice"; import LiveNotice from "../pages/message/notice/LiveNotice"; import MoneyNotice from "../pages/message/notice/MoneyNotice"; import MoreSearch from "../pages/message/MoreSearch"; -import Test6 from "../pages/test/Test6"; +import TestVue3 from "../pages/test/TestVue3.vue"; import RedPacketDetail from "../pages/message/RedPacketDetail"; +import TestKeepAlive from "../pages/test/TestKeepAlive"; +import TestKeepAlivePage1 from "../pages/test/TestKeepAlivePage1"; const routes = [ // {path: '', component: Music}, @@ -80,7 +82,9 @@ const routes = [ {path: '/test3', component: Test3}, {path: '/test4', component: Test4}, {path: '/test5', component: Test5}, - {path: '/test6', component: Test6}, + {path: '/TestVue3', component: TestVue3}, + {path: '/TestKeepAlive', component: TestKeepAlive}, + {path: '/TestKeepAlivePage1', component: TestKeepAlivePage1}, {path: '/home', component: Index}, {path: '/home/submit-report', component: SubmitReport}, {path: '/home/music', component: Music}, @@ -94,22 +98,23 @@ const routes = [ {path: '/publish', component: Publish}, - {path: '/message', component: Message}, - {path: '/message/more-search', component: MoreSearch}, - {path: '/message/share-to-friend', component: Share2Friend}, - {path: '/message/joined-group-chat', component: JoinedGroupChat}, - {path: '/message/fans', component: Fans}, - {path: '/message/all', component: AllMessage}, - {path: '/message/visitors', component: Visitors}, - {path: '/message/douyin-helper', component: DouyinHelper}, - {path: '/message/system-notice', component: SystemNotice}, - {path: '/message/task-notice', component: TaskNotice}, - {path: '/message/live-notice', component: LiveNotice}, - {path: '/message/money-notice', component: MoneyNotice}, - {path: '/message/notice-setting', component: NoticeSetting}, - {path: '/message/chat', component: Chat}, - {path: '/message/chat/detail', component: ChatDetail}, - {path: '/message/chat/red-packet-detail', component: RedPacketDetail}, + {path: '/message', component: Message, meta: {keepAlive: true,}}, + {path: '/message/more-search', component: MoreSearch, meta: {keepAlive: true,}}, + {path: '/message/share-to-friend', component: Share2Friend, meta: {keepAlive: true,}}, + {path: '/message/joined-group-chat', component: JoinedGroupChat, meta: {keepAlive: true,}}, + {path: '/message/fans', component: Fans, meta: {keepAlive: true,}}, + {path: '/message/all', component: AllMessage, meta: {keepAlive: true,}}, + {path: '/message/visitors', component: Visitors, meta: {keepAlive: true,}}, + {path: '/message/douyin-helper', component: DouyinHelper, meta: {keepAlive: true,}}, + {path: '/message/system-notice', component: SystemNotice, meta: {keepAlive: true,}}, + {path: '/message/task-notice', component: TaskNotice, meta: {keepAlive: true,}}, + {path: '/message/live-notice', component: LiveNotice, meta: {keepAlive: true,}}, + {path: '/message/money-notice', component: MoneyNotice, meta: {keepAlive: true,}}, + {path: '/message/notice-setting', component: NoticeSetting, meta: {keepAlive: true,}}, + + {path: '/message/chat', component: Chat, meta: {keepAlive: false,}}, + {path: '/message/chat/detail', component: ChatDetail, meta: {keepAlive: true,}}, + {path: '/message/chat/red-packet-detail', component: RedPacketDetail, meta: {keepAlive: true,}}, {path: '/people/find-acquaintance', component: FindAcquaintance}, @@ -156,5 +161,13 @@ const routes = [ export default VueRouter.createRouter({ history: VueRouter.createWebHashHistory(), - routes, // `routes: routes` 的缩写 + routes, + scrollBehavior(to, from, savedPosition) { + // console.log('savedPosition', savedPosition) + if (savedPosition) { + return savedPosition + } else { + return {top: 0} + } + }, }) \ No newline at end of file diff --git a/src/utils/global-methods.jsx b/src/utils/global-methods.jsx index 7aaf54d..05ee7ce 100644 --- a/src/utils/global-methods.jsx +++ b/src/utils/global-methods.jsx @@ -158,7 +158,8 @@ export default { this.$notice('未实现') }, $back() { - window.history.back() + this.$router.back() + // window.history.back() }, $stopPropagation(e) { // e.stopImmediatePropagation()