小程序diamante

jiangping

2023-10-26 627c3e0a6920131d75eafa4646db373ccc936546

 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-圆形，square-方形 ï¼ˆé»˜è®¤ 'circle' ï¼‰
    * @property {String}          icon       è‡ªå®šä¹‰å›¾æ ‡ ï¼ˆé»˜è®¤ 'arrow-upward' ï¼‰ è§å®˜æ–¹æ–‡æ¡£ç¤ºä¾‹
    * @property {String}          text       æç¤ºæ–‡å­— 
    * @property {String | Number}  duration   è¿”回顶部滚动时间 ï¼ˆé»˜è®¤ 100）
    * @property {String | Number}  scrollTop   æ»šåŠ¨è·ç¦» ï¼ˆé»˜è®¤ 0 ï¼‰
    * @property {String | Number}  top        è·ç¦»é¡¶éƒ¨å¤šå°‘距离显示，单位px ï¼ˆé»˜è®¤ 400 ï¼‰
    * @property {String | Number}  bottom     è¿”回顶部按钮到底部的距离，单位px ï¼ˆé»˜è®¤ 100 ï¼‰
    * @property {String | Number}  right        è¿”回顶部按钮到右边的距离，单位px ï¼ˆé»˜è®¤ 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>