From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目
---
uview-ui/components/u-back-top/u-back-top.vue | 153 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 153 insertions(+), 0 deletions(-)
diff --git a/uview-ui/components/u-back-top/u-back-top.vue b/uview-ui/components/u-back-top/u-back-top.vue
new file mode 100644
index 0000000..7970fc7
--- /dev/null
+++ b/uview-ui/components/u-back-top/u-back-top.vue
@@ -0,0 +1,153 @@
+<template>
+ <view @tap="backToTop" class="u-back-top" :class="['u-back-top--mode--' + mode]" :style="[{
+ bottom: bottom + 'rpx',
+ right: right + 'rpx',
+ borderRadius: mode == 'circle' ? '10000rpx' : '8rpx',
+ zIndex: uZIndex,
+ opacity: opacity
+ }, customStyle]">
+ <view class="u-back-top__content" v-if="!$slots.default && !$slots.$default">
+ <u-icon @click="backToTop" :name="icon" :custom-style="iconStyle"></u-icon>
+ <view class="u-back-top__content__tips">
+ {{tips}}
+ </view>
+ </view>
+ <slot v-else />
+ </view>
+</template>
+
+<script>
+ export default {
+ name: 'u-back-top',
+ props: {
+ // 杩斿洖椤堕儴鐨勫舰鐘讹紝circle-鍦嗗舰锛宻quare-鏂瑰舰
+ mode: {
+ type: String,
+ default: 'circle'
+ },
+ // 鑷畾涔夊浘鏍�
+ icon: {
+ type: String,
+ default: 'arrow-upward'
+ },
+ // 鎻愮ず鏂囧瓧
+ tips: {
+ type: String,
+ default: ''
+ },
+ // 杩斿洖椤堕儴婊氬姩鏃堕棿
+ duration: {
+ type: [Number, String],
+ default: 100
+ },
+ // 婊氬姩璺濈
+ scrollTop: {
+ type: [Number, String],
+ default: 0
+ },
+ // 璺濈椤堕儴澶氬皯璺濈鏄剧ず锛屽崟浣峳px
+ top: {
+ type: [Number, String],
+ default: 400
+ },
+ // 杩斿洖椤堕儴鎸夐挳鍒板簳閮ㄧ殑璺濈锛屽崟浣峳px
+ bottom: {
+ type: [Number, String],
+ default: 200
+ },
+ // 杩斿洖椤堕儴鎸夐挳鍒板彸杈圭殑璺濈锛屽崟浣峳px
+ right: {
+ type: [Number, String],
+ default: 40
+ },
+ // 灞傜骇
+ zIndex: {
+ type: [Number, String],
+ default: '9'
+ },
+ // 鍥炬爣鐨勬牱寮忥紝瀵硅薄褰㈠紡
+ iconStyle: {
+ type: Object,
+ default() {
+ return {
+ color: '#909399',
+ fontSize: '38rpx'
+ }
+ }
+ },
+ // 鏁翠釜缁勪欢鐨勬牱寮�
+ customStyle: {
+ type: Object,
+ default() {
+ return {}
+ }
+ }
+ },
+ watch: {
+ showBackTop(nVal, oVal) {
+ // 褰撶粍浠剁殑鏄剧ず涓庨殣钘忕姸鎬佸彂鐢熻烦鍙樻椂锛屼慨鏀圭粍浠剁殑灞傜骇鍜屼笉閫忔槑搴�
+ // 璁╃粍浠舵湁鏄剧ず鍜屾秷澶辩殑鍔ㄧ敾鏁堟灉锛屽鏋滅敤v-if鎺у埗缁勪欢鐘舵�侊紝灏嗘棤璁剧疆鍔ㄧ敾鏁堟灉
+ if(nVal) {
+ this.uZIndex = this.zIndex;
+ this.opacity = 1;
+ } else {
+ this.uZIndex = -1;
+ this.opacity = 0;
+ }
+ }
+ },
+ computed: {
+ showBackTop() {
+ // 鐢变簬scrollTop涓洪〉闈㈢殑婊氬姩璺濈锛岄粯璁や负px鍗曚綅锛岃繖閲屽皢鐢ㄤ簬浼犲叆鐨則op(rpx)鍊�
+ // 杞负px鐢ㄤ簬姣旇緝锛屽鏋滄粴鍔ㄦ潯鍒伴《鐨勮窛绂诲ぇ浜庤瀹氱殑璺濈锛屽氨鏄剧ず杩斿洖椤堕儴鐨勬寜閽�
+ return this.scrollTop > uni.upx2px(this.top);
+ },
+ },
+ data() {
+ return {
+ // 涓嶉�忔槑搴︼紝涓轰簡璁╃粍浠舵湁涓�涓樉绀哄拰闅愯棌鐨勮繃娓″姩鐢�
+ opacity: 0,
+ // 缁勪欢鐨剒-index鍊硷紝闅愯棌鏃惰缃负-1锛屽氨浼氱湅涓嶅埌
+ uZIndex: -1
+ }
+ },
+ methods: {
+ backToTop() {
+ uni.pageScrollTo({
+ scrollTop: 0,
+ duration: this.duration
+ });
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/style.components.scss";
+
+ .u-back-top {
+ width: 80rpx;
+ height: 80rpx;
+ position: fixed;
+ z-index: 9;
+ @include vue-flex;
+ flex-direction: column;
+ justify-content: center;
+ background-color: #E1E1E1;
+ color: $u-content-color;
+ align-items: center;
+ transition: opacity 0.4s;
+
+ &__content {
+ @include vue-flex;
+ flex-direction: column;
+ align-items: center;
+
+ &__tips {
+ font-size: 24rpx;
+ transform: scale(0.8);
+ line-height: 1;
+ }
+ }
+ }
+</style>
--
Gitblit v1.9.3