BackToTop.vue
1.58 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!--
* @Date: 2025-09-02 13:06:39
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-09-02 13:12:20
* @FilePath: /lls_program/src/components/BackToTop.vue
* @Description: 文件描述
-->
<template>
<view
v-if="showBackToTop"
class="back-to-top"
@click="scrollToTop"
>
<view class="back-to-top-icon">↑</view>
</view>
</template>
<script setup>
import { ref } from 'vue'
import { usePageScroll } from '@tarojs/taro'
import Taro from '@tarojs/taro'
/**
* 返回顶部组件的属性定义
*/
const props = defineProps({
// 触发显示返回顶部按钮的滚动距离，单位rpx
distance: {
type: Number,
default: 300
}
})
// 是否显示返回顶部按钮
const showBackToTop = ref(false)
/**
* 监听页面滚动事件
*/
usePageScroll((res) => {
showBackToTop.value = res.scrollTop > props.distance
})
/**
* 滚动到页面顶部
*/
const scrollToTop = () => {
Taro.pageScrollTo({
scrollTop: 0,
duration: 300
})
}
</script>
<style lang="less">
.back-to-top {
position: fixed;
right: 30rpx;
bottom: 180rpx;
width: 80rpx;
height: 80rpx;
background: rgba(64, 158, 255, 0.8);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
backdrop-filter: blur(10rpx);
transition: all 0.3s ease;
z-index: 999;
&:hover {
background: rgba(64, 158, 255, 1);
transform: translateY(-4rpx);
}
&:active {
transform: translateY(0);
}
}
.back-to-top-icon {
color: white;
font-size: 32rpx;
font-weight: bold;
}
</style>