hookehuyr

feat(组件): 添加返回顶部组件并集成到家庭排名页

在家庭排名页面添加返回顶部功能,提升长页面浏览体验
- 创建新的BackToTop组件,支持自定义触发距离
- 在components.d.ts中注册全局组件
- 在FamilyRank页面集成并使用该组件
......@@ -8,10 +8,12 @@ export {}
declare module 'vue' {
export interface GlobalComponents {
AppHeader: typeof import('./src/components/AppHeader.vue')['default']
BackToTop: typeof import('./src/components/BackToTop.vue')['default']
BottomNav: typeof import('./src/components/BottomNav.vue')['default']
GlassCard: typeof import('./src/components/GlassCard.vue')['default']
NavBar: typeof import('./src/components/navBar.vue')['default']
NutActionSheet: typeof import('@nutui/nutui-taro')['ActionSheet']
NutBacktop: typeof import('@nutui/nutui-taro')['Backtop']
NutButton: typeof import('@nutui/nutui-taro')['Button']
NutDatePicker: typeof import('@nutui/nutui-taro')['DatePicker']
NutImagePreview: typeof import('@nutui/nutui-taro')['ImagePreview']
......
<!--
* @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>
<!--
* @Date: 2025-09-01 13:07:52
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-09-01 16:05:41
* @LastEditTime: 2025-09-02 13:13:17
* @FilePath: /lls_program/src/pages/FamilyRank/index.vue
* @Description: 文件描述
-->
......@@ -122,11 +122,15 @@
</view>
</view>
</view>
<!-- 返回顶部组件 -->
<BackToTop :distance="200" />
</view>
</template>
<script setup>
import { ref, computed } from 'vue'
import BackToTop from '@/components/BackToTop.vue'
// 当前激活的tab
const activeTab = ref('huangpu')
......@@ -134,6 +138,8 @@ const activeTab = ref('huangpu')
// 内容切换状态
const isContentSwitching = ref(false)
/**
* 切换tab
* @param {string} tab - tab名称
......@@ -173,6 +179,8 @@ const formatStepsForList = (steps) => {
return steps ? steps.toLocaleString() : '0'
}
// 前三名数据
const topRanks = ref([
{
......@@ -649,6 +657,7 @@ const myRank = ref({
}
}
}
}
}
</style>
......