From 627c3e0a6920131d75eafa4646db373ccc936546 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期四, 26 十月 2023 13:52:07 +0800
Subject: [PATCH] 小程序diamante
---
minipro_standard/uni_modules/uview-ui/components/u-back-top/u-back-top.vue | 129 +++++++++++++++++++++++++++++++++++++++++++
1 files changed, 129 insertions(+), 0 deletions(-)
diff --git a/minipro_standard/uni_modules/uview-ui/components/u-back-top/u-back-top.vue b/minipro_standard/uni_modules/uview-ui/components/u-back-top/u-back-top.vue
index e69de29..2d07566 100644
--- a/minipro_standard/uni_modules/uview-ui/components/u-back-top/u-back-top.vue
+++ b/minipro_standard/uni_modules/uview-ui/components/u-back-top/u-back-top.vue
@@ -0,0 +1,129 @@
+<template>
+ <u-transition
+ mode="fade"
+ :customStyle="backTopStyle"
+ :show="show"
+ >
+ <view
+ class="u-back-top"
+ :style="[contentStyle]"
+ v-if="!$slots.default && !$slots.$default"
+ @click="backToTop"
+ >
+ <u-icon
+ :name="icon"
+ :custom-style="iconStyle"
+ ></u-icon>
+ <text
+ v-if="text"
+ class="u-back-top__text"
+ >{{text}}</text>
+ </view>
+ <slot v-else />
+ </u-transition>
+</template>
+
+<script>
+ import props from './props.js';
+ // #ifdef APP-NVUE
+ const dom = weex.requireModule('dom')
+ // #endif
+ /**
+ * backTop 杩斿洖椤堕儴
+ * @description 鏈粍浠朵竴涓敤浜庨暱椤甸潰锛屾粦鍔ㄤ竴瀹氳窛绂诲悗锛屽嚭鐜拌繑鍥為《閮ㄦ寜閽紝鏂逛究蹇�熻繑鍥為《閮ㄧ殑鍦烘櫙銆�
+ * @tutorial https://uviewui.com/components/backTop.html
+ *
+ * @property {String} mode 杩斿洖椤堕儴鐨勫舰鐘讹紝circle-鍦嗗舰锛宻quare-鏂瑰舰 锛堥粯璁� 'circle' 锛�
+ * @property {String} icon 鑷畾涔夊浘鏍� 锛堥粯璁� 'arrow-upward' 锛� 瑙佸畼鏂规枃妗ｇず渚�
+ * @property {String} text 鎻愮ず鏂囧瓧
+ * @property {String | Number} duration 杩斿洖椤堕儴婊氬姩鏃堕棿 锛堥粯璁� 100锛�
+ * @property {String | Number} scrollTop 婊氬姩璺濈 锛堥粯璁� 0 锛�
+ * @property {String | Number} top 璺濈椤堕儴澶氬皯璺濈鏄剧ず锛屽崟浣峱x 锛堥粯璁� 400 锛�
+ * @property {String | Number} bottom 杩斿洖椤堕儴鎸夐挳鍒板簳閮ㄧ殑璺濈锛屽崟浣峱x 锛堥粯璁� 100 锛�
+ * @property {String | Number} right 杩斿洖椤堕儴鎸夐挳鍒板彸杈圭殑璺濈锛屽崟浣峱x 锛堥粯璁� 20 锛�
+ * @property {String | Number} zIndex 灞傜骇 锛堥粯璁� 9 锛�
+ * @property {Object<Object>} iconStyle 鍥炬爣鐨勬牱寮忥紝瀵硅薄褰㈠紡 锛堥粯璁� {color: '#909399',fontSize: '19px'}锛�
+ * @property {Object} customStyle 瀹氫箟闇�瑕佺敤鍒扮殑澶栭儴鏍峰紡
+ *
+ * @example <u-back-top :scrollTop="scrollTop"></u-back-top>
+ */
+ export default {
+ name: 'u-back-top',
+ mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
+ computed: {
+ backTopStyle() {
+ // 鍔ㄧ敾缁勪欢鏍峰紡
+ const style = {
+ bottom: uni.$u.addUnit(this.bottom),
+ right: uni.$u.addUnit(this.right),
+ width: '40px',
+ height: '40px',
+ position: 'fixed',
+ zIndex: 10,
+ }
+ return style
+ },
+ show() {
+ return uni.$u.getPx(this.scrollTop) > uni.$u.getPx(this.top)
+ },
+ contentStyle() {
+ const style = {}
+ let radius = 0
+ // 鏄惁鍦嗗舰
+ if(this.mode === 'circle') {
+ radius = '100px'
+ } else {
+ radius = '4px'
+ }
+ // 涓轰簡鍏煎瀹夊崜nvue锛屽彧鑳借繖涔堝垎寮�鍐�
+ style.borderTopLeftRadius = radius
+ style.borderTopRightRadius = radius
+ style.borderBottomLeftRadius = radius
+ style.borderBottomRightRadius = radius
+ return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
+ }
+ },
+ methods: {
+ backToTop() {
+ // #ifdef APP-NVUE
+ if (!this.$parent.$refs['u-back-top']) {
+ uni.$u.error(`nvue椤甸潰闇�瑕佺粰椤甸潰鏈�澶栧眰鍏冪礌璁剧疆"ref='u-back-top'`)
+ }
+ dom.scrollToElement(this.$parent.$refs['u-back-top'], {
+ offset: 0
+ })
+ // #endif
+
+ // #ifndef APP-NVUE
+ uni.pageScrollTo({
+ scrollTop: 0,
+ duration: this.duration
+ });
+ // #endif
+ this.$emit('click')
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ @import '../../libs/css/components.scss';
+ $u-back-top-flex:1 !default;
+ $u-back-top-height:100% !default;
+ $u-back-top-background-color:#E1E1E1 !default;
+ $u-back-top-tips-font-size:12px !default;
+ .u-back-top {
+ @include flex;
+ flex-direction: column;
+ align-items: center;
+ flex:$u-back-top-flex;
+ height: $u-back-top-height;
+ justify-content: center;
+ background-color: $u-back-top-background-color;
+
+ &__tips {
+ font-size:$u-back-top-tips-font-size;
+ transform: scale(0.8);
+ }
+ }
+</style>
--
Gitblit v1.9.3