bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,354 @@
<template>
   <view class="u-tabs">
      <view class="u-tabs__wrapper">
         <slot name="left" />
         <view class="u-tabs__wrapper__scroll-view-wrapper">
            <scroll-view
               :scroll-x="scrollable"
               :scroll-left="scrollLeft"
               scroll-with-animation
               class="u-tabs__wrapper__scroll-view"
               :show-scrollbar="false"
               ref="u-tabs__wrapper__scroll-view"
            >
               <view
                  class="u-tabs__wrapper__nav"
                  ref="u-tabs__wrapper__nav"
               >
                  <view
                     class="u-tabs__wrapper__nav__item"
                     v-for="(item, index) in list"
                     :key="index"
                     @tap="clickHandler(item, index)"
                     :ref="`u-tabs__wrapper__nav__item-${index}`"
                     :style="[$u.addStyle(itemStyle), {flex: scrollable ? '' : 1}]"
                     :class="[`u-tabs__wrapper__nav__item-${index}`, item.disabled && 'u-tabs__wrapper__nav__item--disabled']"
                  >
                     <text
                        :class="[item.disabled && 'u-tabs__wrapper__nav__item__text--disabled']"
                        class="u-tabs__wrapper__nav__item__text"
                        :style="[textStyle(index)]"
                     >{{ item[keyName] }}</text>
                     <u-badge
                        :show="!!(item.badge && (item.badge.show || item.badge.isDot || item.badge.value))"
                        :isDot="item.badge && item.badge.isDot || propsBadge.isDot"
                        :value="item.badge && item.badge.value || propsBadge.value"
                        :max="item.badge && item.badge.max || propsBadge.max"
                        :type="item.badge && item.badge.type || propsBadge.type"
                        :showZero="item.badge && item.badge.showZero || propsBadge.showZero"
                        :bgColor="item.badge && item.badge.bgColor || propsBadge.bgColor"
                        :color="item.badge && item.badge.color || propsBadge.color"
                        :shape="item.badge && item.badge.shape || propsBadge.shape"
                        :numberType="item.badge && item.badge.numberType || propsBadge.numberType"
                        :inverted="item.badge && item.badge.inverted || propsBadge.inverted"
                        customStyle="margin-left: 4px;"
                     ></u-badge>
                  </view>
                  <!-- #ifdef APP-NVUE -->
                  <view
                     class="u-tabs__wrapper__nav__line"
                     ref="u-tabs__wrapper__nav__line"
                     :style="[{
                           width: $u.addUnit(lineWidth),
                           height: $u.addUnit(lineHeight),
                           background: lineColor,
                           backgroundSize: lineBgSize,
                        }]"
                  >
                     <!-- #endif -->
                     <!-- #ifndef APP-NVUE -->
                     <view
                        class="u-tabs__wrapper__nav__line"
                        ref="u-tabs__wrapper__nav__line"
                        :style="[{
                              width: $u.addUnit(lineWidth),
                              transform: `translate(${lineOffsetLeft}px)`,
                              transitionDuration: `${firstTime ? 0 : duration}ms`,
                              height: $u.addUnit(lineHeight),
                              background: lineColor,
                              backgroundSize: lineBgSize,
                           }]"
                     >
                        <!-- #endif -->
                     </view>
                  </view>
            </scroll-view>
         </view>
         <slot name="right" />
      </view>
   </view>
</template>

<script>
   // #ifdef APP-NVUE
   const animation = uni.requireNativePlugin('animation')
   const dom = uni.requireNativePlugin('dom')
   // #endif
   import props from './props.js';
   /**
    * Tabs æ ‡ç­¾
    * @description tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 è¯¥ç»„件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。
    * @tutorial https://www.uviewui.com/components/tabs.html
    * @property {String | Number}   duration         æ»‘块移动一次所需的时间，单位秒（默认 200 ï¼‰
    * @property {String | Number}   swierWidth         swiper的宽度（默认 '750rpx' ï¼‰
    * @property {String}   keyName    ä»Ž`list`元素对象中读取的键名（默认 'name' ï¼‰
    * @event {Function(index)} change æ ‡ç­¾æ”¹å˜æ—¶è§¦å‘ index: ç‚¹å‡»äº†ç¬¬å‡ ä¸ªtab，索引从0开始
    * @event {Function(index)} click ç‚¹å‡»æ ‡ç­¾æ—¶è§¦å‘ index: ç‚¹å‡»äº†ç¬¬å‡ ä¸ªtab，索引从0开始
    * @example <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
    */
   export default {
      name: 'u-tabs',
      mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
      data() {
         return {
            firstTime: true,
            scrollLeft: 0,
            scrollViewWidth: 0,
            lineOffsetLeft: 0,
            tabsRect: {
               left: 0
            },
            innerCurrent: 0,
            moving: false,
         }
      },
      watch: {
         current: {
            immediate: true,
            handler (newValue, oldValue) {
               // å†…外部值不相等时，才尝试移动滑块
               if (newValue !== this.innerCurrent) {
                  this.innerCurrent = newValue
                  this.$nextTick(() => {
                     this.resize()
                  })
               }
            }
         },
         // list变化时，重新渲染list各项信息
         list() {
            this.$nextTick(() => {
               this.resize()
            })
         }
      },
      computed: {
         textStyle() {
            return index => {
               const style = {}
               // å–当期是否激活的样式
               const customeStyle = index === this.innerCurrent ? uni.$u.addStyle(this.activeStyle) : uni.$u
                  .addStyle(
                     this.inactiveStyle)
               // å¦‚果当前菜单被禁用，则加上对应颜色，需要在此做处理，是因为nvue下，无法在style样式中通过!import覆盖标签的内联样式
               if (this.list[index].disabled) {
                  style.color = '#c8c9cc'
               }
               return uni.$u.deepMerge(customeStyle, style)
            }
         },
         propsBadge() {
            return uni.$u.props.badge
         }
      },
      async mounted() {
         this.init()
      },
      methods: {
         setLineLeft() {
            const tabItem = this.list[this.innerCurrent];
            if (!tabItem) {
               return;
            }
            // èŽ·å–滑块该移动的位置
            let lineOffsetLeft = this.list
               .slice(0, this.innerCurrent)
               .reduce((total, curr) => total + curr.rect.width, 0);
                // èŽ·å–下划线的数值px表示法
            const lineWidth = uni.$u.getPx(this.lineWidth);
            this.lineOffsetLeft = lineOffsetLeft + (tabItem.rect.width - lineWidth) / 2
            // #ifdef APP-NVUE
            // ç¬¬ä¸€æ¬¡ç§»åŠ¨æ»‘块，无需过渡时间
            this.animation(this.lineOffsetLeft, this.firstTime ? 0 : parseInt(this.duration))
            // #endif

            // å¦‚果是第一次执行此方法，让滑块在初始化时，瞬间滑动到第一个tab item的中间
            // è¿™é‡Œéœ€è¦ä¸€ä¸ªå®šæ—¶å™¨ï¼Œå› ä¸ºåœ¨éžnvue下，是直接通过style绑定过渡时间，需要等其过渡完成后，再设置为false(非第一次移动滑块)
            if (this.firstTime) {
               setTimeout(() => {
                  this.firstTime = false
               }, 10);
            }
         },
         // nvue下设置滑块的位置
         animation(x, duration = 0) {
            // #ifdef APP-NVUE
            const ref = this.$refs['u-tabs__wrapper__nav__line']
            animation.transition(ref, {
               styles: {
                  transform: `translateX(${x}px)`
               },
               duration
            })
            // #endif
         },
         // ç‚¹å‡»æŸä¸€ä¸ªæ ‡ç­¾
         clickHandler(item, index) {
            // å› ä¸ºæ ‡ç­¾å¯èƒ½ä¸ºdisabled状态，所以click是一定会发出的，但是change事件是需要可用的状态才发出
            this.$emit('click', {
               ...item,
               index
            })
            // å¦‚æžœdisabled状态，返回
            if (item.disabled) return
            this.innerCurrent = index
            this.resize()
            this.$emit('change', {
               ...item,
               index
            })
         },
         init() {
            uni.$u.sleep().then(() => {
               this.resize()
            })
         },
         setScrollLeft() {
            // å½“前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
            const tabRect = this.list[this.innerCurrent]
            // ç´¯åŠ å¾—到当前item到左边的距离
            const offsetLeft = this.list
               .slice(0, this.innerCurrent)
               .reduce((total, curr) => {
                  return total + curr.rect.width
               }, 0)
            // æ­¤å¤„为屏幕宽度
            const windowWidth = uni.$u.sys().windowWidth
            // å°†æ´»åŠ¨çš„tabs-item移动到屏幕正中间，实际上是对scroll-view的移动
            let scrollLeft = offsetLeft - (this.tabsRect.width - tabRect.rect.width) / 2 - (windowWidth - this.tabsRect
               .right) / 2 + this.tabsRect.left / 2
            // è¿™é‡Œåšä¸€ä¸ªé™åˆ¶ï¼Œé™åˆ¶scrollLeft的最大值为整个scroll-view宽度减去tabs组件的宽度
            scrollLeft = Math.min(scrollLeft, this.scrollViewWidth - this.tabsRect.width)
            this.scrollLeft = Math.max(0, scrollLeft)
         },
         // èŽ·å–所有标签的尺寸
         resize() {
            // å¦‚果不存在list，则不处理
            if(this.list.length === 0) {
               return
            }
            Promise.all([this.getTabsRect(), this.getAllItemRect()]).then(([tabsRect, itemRect = []]) => {
               this.tabsRect = tabsRect
               this.scrollViewWidth = 0
               itemRect.map((item, index) => {
                  // è®¡ç®—scroll-view的宽度，这里
                  this.scrollViewWidth += item.width
                  // å¦å¤–计算每一个item的中心点X轴坐标
                  this.list[index].rect = item
               })
               // èŽ·å–了tabs的尺寸之后，设置滑块的位置
               this.setLineLeft()
               this.setScrollLeft()
            })
         },
         // èŽ·å–导航菜单的尺寸
         getTabsRect() {
            return new Promise(resolve => {
               this.queryRect('u-tabs__wrapper__scroll-view').then(size => resolve(size))
            })
         },
         // èŽ·å–所有标签的尺寸
         getAllItemRect() {
            return new Promise(resolve => {
               const promiseAllArr = this.list.map((item, index) => this.queryRect(
                  `u-tabs__wrapper__nav__item-${index}`, true))
               Promise.all(promiseAllArr).then(sizes => resolve(sizes))
            })
         },
         // èŽ·å–各个标签的尺寸
         queryRect(el, item) {
            // #ifndef APP-NVUE
            // $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://www.uviewui.com/js/getRect.html
            // ç»„件内部一般用this.$uGetRect，对外的为uni.$u.getRect，二者功能一致，名称不同
            return new Promise(resolve => {
               this.$uGetRect(`.${el}`).then(size => {
                  resolve(size)
               })
            })
            // #endif

            // #ifdef APP-NVUE
            // nvue下，使用dom模块查询元素高度
            // è¿”回一个promise，让调用此方法的主体能使用then回调
            return new Promise(resolve => {
               dom.getComponentRect(item ? this.$refs[el][0] : this.$refs[el], res => {
                  resolve(res.size)
               })
            })
            // #endif
         },
      },
   }
</script>

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

   .u-tabs {

      &__wrapper {
         @include flex;
         align-items: center;

         &__scroll-view-wrapper {
            flex: 1;
            /* #ifndef APP-NVUE */
            overflow: auto hidden;
            /* #endif */
         }

         &__scroll-view {
            @include flex;
            flex: 1;
         }

         &__nav {
            @include flex;
            position: relative;

            &__item {
               padding: 0 11px;
               @include flex;
               align-items: center;
               justify-content: center;

               &--disabled {
                  /* #ifndef APP-NVUE */
                  cursor: not-allowed;
                  /* #endif */
               }

               &__text {
                  font-size: 15px;
                  color: $u-content-color;

                  &--disabled {
                     color: $u-disabled-color !important;
                  }
               }
            }

            &__line {
               height: 3px;
               background: $u-primary;
               width: 30px;
               position: absolute;
               bottom: 2px;
               border-radius: 100px;
               transition-property: transform;
               transition-duration: 300ms;
            }
         }
      }
   }
</style>