bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/uni_modules/uview-ui/components/u-tabbar/u-tabbar.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,141 @@
<template>
   <view class="u-tabbar">
      <view
          class="u-tabbar__content"
          ref="u-tabbar__content"
          @touchmove.stop.prevent="noop"
          :class="[border && 'u-border-top', fixed && 'u-tabbar--fixed']"
          :style="[tabbarStyle]"
      >
         <view class="u-tabbar__content__item-wrapper">
            <slot />
         </view>
         <u-safe-bottom v-if="safeAreaInsetBottom"></u-safe-bottom>
      </view>
      <view
          class="u-tabbar__placeholder"
         v-if="placeholder"
          :style="{
            height: placeholderHeight + 'px',
         }"
      ></view>
   </view>
</template>

<script>
   import props from './props.js';
   // #ifdef APP-NVUE
   const dom = uni.requireNativePlugin('dom')
   // #endif
   /**
    * Tabbar åº•éƒ¨å¯¼èˆªæ 
    * @description æ­¤ç»„件提供了自定义tabbar的能力。
    * @tutorial https://www.uviewui.com/components/tabbar.html
    * @property {String | Number}   value            å½“前匹配项的name
    * @property {Boolean}         safeAreaInsetBottom   æ˜¯å¦ä¸ºiPhoneX留出底部安全距离（默认 true ï¼‰
    * @property {Boolean}         border            æ˜¯å¦æ˜¾ç¤ºä¸Šæ–¹è¾¹æ¡†ï¼ˆé»˜è®¤ true ï¼‰
    * @property {String | Number}   zIndex            å…ƒç´ å±‚级z-index（默认 1 ï¼‰
    * @property {String}         activeColor         é€‰ä¸­æ ‡ç­¾çš„颜色（默认 '#1989fa' ï¼‰
    * @property {String}         inactiveColor      æœªé€‰ä¸­æ ‡ç­¾çš„颜色（默认 '#7d7e80' ï¼‰
    * @property {Boolean}         fixed            æ˜¯å¦å›ºå®šåœ¨åº•éƒ¨ï¼ˆé»˜è®¤ true ï¼‰
    * @property {Boolean}         placeholder         fixed定位固定在底部时，是否生成一个等高元素防止塌陷（默认 true ï¼‰
    * @property {Object}         customStyle         å®šä¹‰éœ€è¦ç”¨åˆ°çš„外部样式
    * 
    * @example <u-tabbar :value="value2" :placeholder="false" @change="name => value2 = name" :fixed="false" :safeAreaInsetBottom="false"><u-tabbar-item text="首页" icon="home" dot ></u-tabbar-item></u-tabbar>
    */
   export default {
      name: 'u-tabbar',
      mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
      data() {
         return {
            placeholderHeight: 0
         }
      },
      computed: {
         tabbarStyle() {
            const style = {
               zIndex: this.zIndex
            }
            // åˆå¹¶æ¥è‡ªçˆ¶ç»„件的customStyle样式
            return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
         },
         // ç›‘听多个参数的变化，通过在computed执行对应的操作
         updateChild() {
            return [this.value, this.activeColor, this.inactiveColor]
         },
         updatePlaceholder() {
            return [this.fixed, this.placeholder]
         }
      },
      watch: {
         updateChild() {
            // å¦‚æžœupdateChildren中的元素发生了变化，则执行子元素初始化操作
            this.updateChildren()
         },
         updatePlaceholder() {
            // å¦‚æžœfixed，placeholder等参数发生变化，重新计算占位元素的高度
            this.setPlaceholderHeight()
         }
      },
      created() {
         this.children = []
      },
      mounted() {
         this.setPlaceholderHeight()
      },
      methods: {
         updateChildren() {
            // å¦‚果存在子元素，则执行子元素的updateFromParent进行更新数据
            this.children.length && this.children.map(child => child.updateFromParent())
         },
         // è®¾ç½®ç”¨äºŽé˜²æ­¢å¡Œé™·å…ƒç´ çš„高度
         async setPlaceholderHeight() {
            if (!this.fixed || !this.placeholder) return
            // å»¶æ—¶ä¸€å®šæ—¶é—´
            await uni.$u.sleep(20)
            // #ifndef APP-NVUE
            this.$uGetRect('.u-tabbar__content').then(({height = 50}) => {
               // ä¿®å¤IOS safearea bottom æœªå¡«å……高度
               this.placeholderHeight = height
            })
            // #endif

            // #ifdef APP-NVUE
            dom.getComponentRect(this.$refs['u-tabbar__content'], (res) => {
               const {
                  size
               } = res
               this.placeholderHeight = size.height
            })
            // #endif
         }
      }
   }
</script>

<style lang="scss" scoped>
   @import "../../libs/css/components.scss";

   .u-tabbar {
      @include flex(column);
      flex: 1;
      justify-content: center;
		
      &__content {
         @include flex(column);
         background-color: #fff;
			
         &__item-wrapper {
            height: 50px;
            @include flex(row);
         }
      }

      &--fixed {
         position: fixed;
         bottom: 0;
         left: 0;
         right: 0;
      }
   }
</style>