Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 244e4df

Browse files
修改跳转方式
1 parent 95f4f0f commit 244e4df

File tree

18 files changed

+409
-382
lines changed

18 files changed

+409
-382
lines changed

‎src/components/vue-route-transition/RouteLayout.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<template>
22
<div class="vue-route-transition__wrapper">
3-
<!-- <header>
3+
<header>
44
<slot name="header"></slot>
5-
</header>-->
5+
</header>
66
<main class="vue-route-transition__content" :id="cId">
77
<slot></slot>
88
</main>
9-
<!-- <footer>
9+
<footer>
1010
<slot name="footer"></slot>
11-
</footer>-->
11+
</footer>
1212
</div>
1313
</template>
1414
<script>
@@ -32,7 +32,7 @@ export default {
3232

3333
<style scoped>
3434
.vue-route-transition__wrapper {
35-
background: #fff;
35+
background: #ededed;
3636
position: absolute;
3737
width: 100%;
3838
height: 100%;

‎src/components/vue-route-transition/RouteTransition.vue‎

Lines changed: 33 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -122,21 +122,23 @@ export default {
122122
// 进入
123123
// el.style.transform = 'translate(0, 0)'
124124
// el.style.transition = 'all 0.4s'
125-
el.style.animation = "pageFromRightToCenter 5000ms forwards";
125+
el.style.animation = "pageFromRightToCenter 400ms forwards";
126126
el.style.zIndex = "10";
127127
el.style.boxShadow = " -3px 0 5px rgba(0, 0, 0, 0.1)";
128128
} else if (dir === "slide-right") {
129129
// 返回
130130
// el.style.transform = 'translate(0, 0)'
131131
// el.style.transition = 'transform 0.4s'
132-
el.style.animation = "pageFromLeftToCenter 5000ms forwards";
132+
el.style.animation = "pageFromLeftToCenter 400ms forwards";
133133
el.style.zIndex = "1";
134134
} else {
135135
// fade
136+
el.style.animation = "pageFadeIn 400ms forwards";
136137
}
138+
// 这里需要设置个定时器,否则消失的界面会立即隐藏掉
137139
setTimeout(() => {
138140
done();
139-
}, 5000);
141+
}, 400);
140142
// done()
141143
},
142144
afterEnter: function(el) {
@@ -185,22 +187,20 @@ export default {
185187
if (dir === "slide-left") {
186188
// el.style.transform = 'translate(-100%, 0)'
187189
// el.style.transition = 'all 0.4s'
188-
el.style.animation = "pageFromCenterToLeft 5000ms forwards";
190+
el.style.animation = "pageFromCenterToLeft 400ms forwards";
189191
el.style.zIndex = "1";
190192
} else if (dir === "slide-right") {
191193
// 返回
192-
// el.style.transform = 'translate(100%, 0)'
193-
// el.style.transition = 'all 0.4s'
194-
el.style.animation = "pageFromCenterToRight 5000ms forwards";
194+
el.style.animation = "pageFromCenterToRight 400ms forwards";
195195
el.style.boxShadow = " -3px 0 5px rgba(0, 0, 0, 0.1)";
196196
el.style.zIndex = "10";
197197
} else {
198-
// fade
198+
// fade out
199+
el.style.animation = "pageFadeOut 400ms forwards";
199200
}
200-
201201
setTimeout(() => {
202202
done();
203-
}, 5000);
203+
}, 400);
204204
// done()
205205
},
206206
afterLeave: function(el) {
@@ -324,25 +324,28 @@ export default {
324324
};
325325
</script>
326326

327-
<style lang="less">
328-
html,
329-
body {
330-
width: 100%;
331-
height: 100%;
332-
}
327+
<style scoped>
333328
.vue-route-transition {
334-
position: absolute;
329+
position: relative;
330+
background-color: #ededed;
335331
width: 100%;
336332
height: 100%;
333+
display: -webkit-box;
334+
display: -webkit-flex;
337335
display: flex;
336+
-webkit-flex-direction: column;
338337
flex-direction: column;
339338
overflow: hidden;
340339
backface-visibility: hidden;
341340
perspective: 1000;
342341
}
342+
</style>
343+
344+
<style>
343345
.fade-enter-active {
344-
animation: pageFadeIn 5000ms forwards;
346+
animation: pageFadeIn 400ms forwards;
345347
}
348+
/* fade 进入 */
346349
@keyframes pageFadeIn {
347350
from {
348351
opacity: 0;
@@ -351,29 +354,37 @@ body {
351354
opacity: 1;
352355
}
353356
}
357+
@keyframes pageFadeOut {
358+
from {
359+
opacity: 1;
360+
}
361+
to {
362+
opacity: 0;
363+
}
364+
}
354365
355366
/*路由前进,退出*/
356367
.slide-left-leave-active {
357-
animation: pageFromCenterToLeft 5000ms forwards;
368+
animation: pageFromCenterToLeft 400ms forwards;
358369
z-index: 1;
359370
}
360371
361372
/*路由后退,进入*/
362373
.slide-right-enter-active {
363-
animation: pageFromLeftToCenter 5000ms forwards;
374+
animation: pageFromLeftToCenter 400ms forwards;
364375
z-index: 1;
365376
}
366377
367378
/*路由后退,退出*/
368379
.slide-right-leave-active {
369-
animation: pageFromCenterToRight 5000ms forwards;
380+
animation: pageFromCenterToRight 400ms forwards;
370381
z-index: 10;
371382
box-shadow: -3px 0 5px rgba(0, 0, 0, 0.1);
372383
}
373384
374385
/*路由前进,进入*/
375386
.slide-left-enter-active {
376-
animation: pageFromRightToCenter 5000ms forwards;
387+
animation: pageFromRightToCenter 400ms forwards;
377388
z-index: 10;
378389
box-shadow: -3px 0 5px rgba(0, 0, 0, 0.1);
379390
}

‎src/router.js‎

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -64,15 +64,7 @@ export default new Router({
6464
routes: [
6565
{
6666
path: '/',
67-
redirect: '/button'
68-
},
69-
{
70-
path: '/button',
71-
name: 'button',
72-
component: button,
73-
meta: {
74-
keepAlive: true
75-
}
67+
redirect: '/homepage'
7668
},
7769
{
7870
path: '/homepage',
@@ -84,14 +76,6 @@ export default new Router({
8476
keepAlive: true
8577
},
8678
children: [
87-
{
88-
path: 'button',
89-
name: 'button',
90-
component: button,
91-
meta: {
92-
keepAlive: true
93-
}
94-
},
9579
{
9680
path: 'mainframe',
9781
name: 'mainframe',
@@ -126,7 +110,7 @@ export default new Router({
126110
},
127111
{
128112
path: '',
129-
redirect: '/homepage/button',
113+
redirect: '/homepage/mainframe',
130114
meta: {
131115
keepAlive: true
132116
}

‎src/views/contacts/Contacts.vue‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,27 @@
11
<template>
2-
<divclass="_full-content _content-padding-top44 _content-padding-bottom49">
2+
<vue-route-layout>
33
<NavigationBar
44
title="通讯录"
55
:right-item="addFriendsItem"
66
@right-click="rightItemDidClicked"
77
></NavigationBar>
8-
<SlotTest>
9-
<!-- <div slot="header">我是头部</div>
8+
<div class="_content-padding-top44 _content-padding-bottom49">
9+
<SlotTest>
10+
<!-- <div slot="header">我是头部</div>
1011
<div>我是默认</div>
1112
<div slot="footer">我是尾部</div> -->
12-
<template v-slot:header>
13-
<div slot="header">我是头部</div>
14-
</template>
15-
<template v-slot:default="slotProps">{{
16-
slotProps.user.lastName
17-
}}</template>
18-
<template v-slot:footer>
19-
<div>我是尾部</div>
20-
</template>
21-
</SlotTest>
22-
</div>
13+
<template v-slot:header>
14+
<div slot="header">我是头部</div>
15+
</template>
16+
<template v-slot:default="slotProps">{{
17+
slotProps.user.lastName
18+
}}</template>
19+
<template v-slot:footer>
20+
<div>我是尾部</div>
21+
</template>
22+
</SlotTest>
23+
</div>
24+
</vue-route-layout>
2325
</template>
2426

2527
<script>

‎src/views/discover/Discover.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
2-
<divclass="_full-content _content-padding-top44 _content-padding-bottom49">
2+
<vue-route-layout>
33
<NavigationBar title="发现"></NavigationBar>
4-
<div>
4+
<divclass="_content-padding-top44 _content-padding-bottom49">
55
<div
66
class="mh-common-group"
77
v-for="(group, section) in dataSource"
@@ -14,7 +14,7 @@
1414
></common>
1515
</div>
1616
</div>
17-
</div>
17+
</vue-route-layout>
1818
</template>
1919

2020
<script>

‎src/views/discover/fullText/MomentsFullText.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<template>
2-
<divclass="_full-container">
2+
<vue-route-layout>
33
<NavigationBar
44
:left-item="blackBackItem"
55
@left-click="$router.back()"
66
title="全文"
77
></NavigationBar>
8-
<div class="_full-content _content-padding-top44">
8+
<div class="_content-padding-top44">
99
<!-- 正文wrapper -->
1010
<div :style="style">
1111
<p
@@ -22,7 +22,7 @@
2222
:items="items"
2323
></ActionSheet>
2424
</div>
25-
</div>
25+
</vue-route-layout>
2626
</template>
2727

2828
<script>

‎src/views/discover/moments/Moments.vue‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// 朋友圈
22
<template>
3-
<divclass="_full-container"@touchstart="touchstartAction">
4-
<div class="_full-content">
3+
<vue-route-layout>
4+
<div class="_full-content"@touchstart="touchstartAction">
55
<!-- 导航栏透明 -->
66
<NavigationBar
77
title="朋友圈"
@@ -254,7 +254,7 @@
254254
@on-index-change="logIndexChange"
255255
></previewer>
256256
</div>
257-
</div>
257+
</vue-route-layout>
258258
</template>
259259

260260
<script>
@@ -659,8 +659,12 @@ export default {
659659
if (this.lastOpacity !== opacity) {
660660
this.lastOpacity = opacity;
661661
}
662-
// lastRefreshTop
663-
this.lastRefreshTop = scrollTop;
662+
// Fixed Bug: 20190715 不需要设置lastRefreshTop 过大,否则会导致出现两根滚动条的Bug
663+
// lastRefreshTop 只要设置为 this.refreshShowValue - this.refreshHiddenValue 为临界点即可
664+
this.lastRefreshTop = Math.min(
665+
this.refreshShowValue - this.refreshHiddenValue,
666+
scrollTop
667+
);
664668
},
665669
666670
// 导航栏有按钮点击事件

‎src/views/discover/other/MomentsOther.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<template>
2-
<divclass="_full-container">
2+
<vue-route-layout>
33
<NavigationBar
44
:left-item="blackBackItem"
55
@left-click="$router.back()"
66
title="富文本事件"
77
></NavigationBar>
8-
<div class="_full-content _content-padding-top44">
8+
<div class="_content-padding-top44">
99
<h1 class="other__title">点击内容:👉{{ value }}</h1>
1010
<img
1111
class="previewer-demo-img"
@@ -16,7 +16,7 @@
1616
@click="show(index)"
1717
/>
1818
</div>
19-
</div>
19+
</vue-route-layout>
2020
</template>
2121

2222
<script>

‎src/views/homepage/Homepage.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<keep-alive>
66
<router-view></router-view>
77
</keep-alive>
8-
<!-- <TabBar></TabBar> -->
8+
<TabBar></TabBar>
99
</vue-route-layout>
1010
</template>
1111

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /