2025-07-21 16:47:04 +08:00
|
|
|
<template>
|
|
|
|
|
<view class="back-top-wrapper" :style="{ bottom }">
|
|
|
|
|
<view
|
|
|
|
|
class="back-top"
|
|
|
|
|
:class="{
|
|
|
|
|
'is-show': visible
|
|
|
|
|
}"
|
|
|
|
|
>
|
2025-07-29 10:44:18 +08:00
|
|
|
<cl-icon name="skip-up-line" color="white" size="25px"></cl-icon>
|
2025-07-21 16:47:04 +08:00
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { computed, ref } from "vue";
|
|
|
|
|
import { usePage } from "@/cool";
|
|
|
|
|
|
|
|
|
|
defineOptions({
|
|
|
|
|
name: "cl-page-back-top"
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const page = usePage();
|
|
|
|
|
const { screenHeight } = uni.getWindowInfo();
|
|
|
|
|
|
|
|
|
|
// 是否显示回到顶部按钮
|
|
|
|
|
const visible = ref(false);
|
|
|
|
|
|
|
|
|
|
// 底部距离
|
|
|
|
|
const bottom = computed(() => {
|
|
|
|
|
let h = 20;
|
|
|
|
|
|
|
|
|
|
if (page.hasCustomTabBar()) {
|
|
|
|
|
h += page.getTabBarHeight();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return h + "px";
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 监听页面滚动
|
|
|
|
|
page.onPageScroll((top) => {
|
|
|
|
|
// 控制是否显示回到顶部按钮
|
|
|
|
|
visible.value = top > screenHeight - 100;
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.back-top {
|
|
|
|
|
@apply flex flex-row items-center justify-center bg-primary-500 rounded-full;
|
|
|
|
|
width: 40px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
transition-property: transform;
|
|
|
|
|
transition-duration: 0.3s;
|
|
|
|
|
transform: translateX(160rpx);
|
|
|
|
|
|
|
|
|
|
&.is-show {
|
|
|
|
|
transform: translateX(-20px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&-wrapper {
|
|
|
|
|
@apply fixed z-50 overflow-visible;
|
|
|
|
|
right: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
