Skip to content

Commit bf08756

Browse files
dongsuoPanJiaChen
dongsuo
authored and
PanJiaChen
committed
'新增功能：返回顶部'
1 parent ba2e486 commit bf08756

File tree

3 files changed

+238
-1
lines changed

3 files changed

+238
-1
lines changed

‎src/components/BackToTop/index.vue

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<template>
2+
<transition name="fade">
3+
<div class="back-to-top" @click="backToTop" v-show="visible">
4+
<el-tooltip class="item" effect="dark" content="返回顶部" placement="top">
5+
<i class="el-icon-arrow-up"></i>
6+
</el-tooltip>
7+
</div>
8+
</transition>
9+
</template>
10+
<script>
11+
export default {
12+
name: 'BackToTop',
13+
props: {
14+
visibilityHeight: {
15+
type: Number,
16+
default: 400
17+
},
18+
backPosition: {
19+
type: Number,
20+
default: 0
21+
}
22+
},
23+
data() {
24+
return {
25+
visible: false
26+
}
27+
},
28+
mounted() {
29+
window.addEventListener('scroll', this.handleScroll)
30+
},
31+
beforeDestroy() {
32+
window.removeEventListener('scroll', this.handleScroll)
33+
},
34+
methods: {
35+
handleScroll() {
36+
this.visible = window.pageYOffset > this.visibilityHeight;
37+
},
38+
backToTop() {
39+
const start = window.pageYOffset;
40+
let i = 0;
41+
const t = setInterval(() => {
42+
const next = Math.floor(this.easeInOutQuad(10 * i, start, -start, 500));
43+
if (next <= this.backPosition) {
44+
window.scrollTo(0, this.backPosition);
45+
clearInterval(t)
46+
} else {
47+
window.scrollTo(0, next);
48+
}
49+
i++;
50+
}, 16.7)
51+
},
52+
easeInOutQuad(t, b, c, d) {
53+
if ((t /= d / 2) < 1) return c / 2 * t * t + b;
54+
return -c / 2 * (--t * (t - 2) - 1) + b;
55+
}
56+
}
57+
}
58+
</script>
59+
<style scoped>
60+
.back-to-top {
61+
position: fixed;
62+
right: 50px;
63+
bottom: 50px;
64+
display: inline-block;
65+
height: 40px;
66+
width: 40px;
67+
box-shadow: 1px 1px 1px #58B7FF;
68+
text-align: center;
69+
cursor: pointer;
70+
background: #58B7FF;
71+
color: #fff;
72+
}
73+
74+
.fade-enter-active,
75+
.fade-leave-active {
76+
transition: opacity 1s
77+
}
78+
79+
.fade-enter,
80+
.fade-leave-to {
81+
opacity: 0
82+
}
83+
84+
.back-to-top i {
85+
display: inline-block;
86+
width: 100%;
87+
height: 100%;
88+
line-height: 40px;
89+
}
90+
</style>
91+
92+

‎src/router/index.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ const Sticky = _import('components/sticky');
2828
const SplitPane = _import('components/splitpane');
2929
const CountTo = _import('components/countTo');
3030
const Mixin = _import('components/mixin');
31+
const BackToTop = _import('components/backToTop')
3132

3233
/* charts */
3334
const chartIndex = _import('charts/index');
@@ -129,7 +130,8 @@ export const asyncRouterMap = [
129130
{ path: 'dropzone', component: Dropzone, name: 'Dropzone' },
130131
{ path: 'sticky', component: Sticky, name: 'Sticky' },
131132
{ path: 'countto', component: CountTo, name: 'CountTo' },
132-
{ path: 'mixin', component: Mixin, name: '小组件' }
133+
{ path: 'mixin', component: Mixin, name: '小组件' },
134+
{ path: 'backtotop', component: BackToTop, name: '返回顶部' }
133135
]
134136
},
135137
{

‎src/views/components/backToTop.vue

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
<template>
2+
<div class="components-container">
3+
<code>页面滚动到指定位置会在右下角出现返回顶部按钮</code>
4+
<div>我是占位</div>
5+
<div>我是占位</div>
6+
<div>我是占位</div>
7+
<div>我是占位</div>
8+
<div>我是占位</div>
9+
<div>我是占位</div>
10+
<div>我是占位</div>
11+
<div>我是占位</div>
12+
<div>我是占位</div>
13+
<div>我是占位</div>
14+
<div>我是占位</div>
15+
<div>我是占位</div>
16+
<div>我是占位</div>
17+
<div>我是占位</div>
18+
<div>我是占位</div>
19+
<div>我是占位</div>
20+
<div>我是占位</div>
21+
<div>我是占位</div>
22+
<div>我是占位</div>
23+
<div>我是占位</div>
24+
<div>我是占位</div>
25+
<div>我是占位</div>
26+
<div>我是占位</div>
27+
<div>我是占位</div>
28+
<div>我是占位</div>
29+
<div>我是占位</div>
30+
<div>我是占位</div>
31+
<div>我是占位</div>
32+
<div>我是占位</div>
33+
<div>我是占位</div>
34+
<div>我是占位</div>
35+
<div>我是占位</div>
36+
<div>我是占位</div>
37+
<div>我是占位</div>
38+
<div>我是占位</div>
39+
<div>我是占位</div>
40+
<div>我是占位</div>
41+
<div>我是占位</div>
42+
<div>我是占位</div>
43+
<div>我是占位</div>
44+
<div>我是占位</div>
45+
<div>我是占位</div>
46+
<div>我是占位</div>
47+
<div>我是占位</div>
48+
<div>我是占位</div>
49+
<div>我是占位</div>
50+
<div>我是占位</div>
51+
<div>我是占位</div>
52+
<div>我是占位</div>
53+
<div>我是占位</div>
54+
<div>我是占位</div>
55+
<div>我是占位</div>
56+
<div>我是占位</div>
57+
<div>我是占位</div>
58+
<div>我是占位</div>
59+
<div>我是占位</div>
60+
<div>我是占位</div>
61+
<div>我是占位</div>
62+
<div>我是占位</div>
63+
<div>我是占位</div>
64+
<div>我是占位</div>
65+
<div>我是占位</div>
66+
<div>我是占位</div>
67+
<div>我是占位</div>
68+
<div>我是占位</div>
69+
<div>我是占位</div>
70+
<div>我是占位</div>
71+
<div>我是占位</div>
72+
<div>我是占位</div>
73+
<div>我是占位</div>
74+
<div>我是占位</div>
75+
<div>我是占位</div>
76+
<div>我是占位</div>
77+
<div>我是占位</div>
78+
<div>我是占位</div>
79+
<div>我是占位</div>
80+
<div>我是占位</div>
81+
<div>我是占位</div>
82+
<div>我是占位</div>
83+
<div>我是占位</div>
84+
<div>我是占位</div>
85+
<div>我是占位</div>
86+
<div>我是占位</div>
87+
<div>我是占位</div>
88+
<div>我是占位</div>
89+
<div>我是占位</div>
90+
<div>我是占位</div>
91+
<div>我是占位</div>
92+
<div>我是占位</div>
93+
<div>我是占位</div>
94+
<div>我是占位</div>
95+
<div>我是占位</div>
96+
<div>我是占位</div>
97+
<div>我是占位</div>
98+
<div>我是占位</div>
99+
<div>我是占位</div>
100+
<div>我是占位</div>
101+
<div>我是占位</div>
102+
<div>我是占位</div>
103+
<div>我是占位</div>
104+
<div>我是占位</div>
105+
<div>我是占位</div>
106+
<div>我是占位</div>
107+
<div>我是占位</div>
108+
<div>我是占位</div>
109+
<div>我是占位</div>
110+
<div>我是占位</div>
111+
<div>我是占位</div>
112+
<div>我是占位</div>
113+
<div>我是占位</div>
114+
<div>我是占位</div>
115+
<div>我是占位</div>
116+
<div>我是占位</div>
117+
<div>我是占位</div>
118+
<div>我是占位</div>
119+
<div>我是占位</div>
120+
<div>我是占位</div>
121+
<div>我是占位</div>
122+
<div>我是占位</div>
123+
<div>我是占位</div>
124+
<div>我是占位</div>
125+
<div>我是占位</div>
126+
<div>我是占位</div>
127+
<div>我是占位</div>
128+
<back-to-top id="back-to-top-t" :visibilityHeight="300" :backPosition="50"></back-to-top>
129+
</div>
130+
</template>
131+
<script>
132+
import BackToTop from 'components/BackToTop';
133+
export default {
134+
components: { BackToTop }
135+
136+
}
137+
</script>
138+
<style scoped>
139+
#back-to-top-t{
140+
right: 100px;
141+
bottom: 100px;
142+
}
143+
</style>

0 commit comments

Comments
 (0)