-

zhangwei

2025-03-05 16213c0f85aa3ac8317797bf4a05fd12940e16d3

 src/uni_modules/uview-plus/components/u-tabs/u-tabs.vue

@@ -23,7 +23,9 @@
                     @longpress="longPressHandler(item,index)"
                     :ref="`u-tabs__wrapper__nav__item-${index}`"
                     :style="[addStyle(itemStyle), {flex: scrollable ? '' : 1}]"
                     :class="[`u-tabs__wrapper__nav__item-${index}`, item.disabled && 'u-tabs__wrapper__nav__item--disabled']"
                     :class="[`u-tabs__wrapper__nav__item-${index}`,
                        item.disabled && 'u-tabs__wrapper__nav__item--disabled',
                        innerCurrent == index ? 'u-tabs__wrapper__nav__item-active' : '']"
                  >
                     <slot v-if="$slots.content" name="content" :item="item" :keyName="keyName" :index="index" />
                     <slot v-else-if="!$slots.content && ($slots.default || $slots.$default)"
@@ -93,7 +95,7 @@
   import { mpMixin } from '../../libs/mixin/mpMixin';
   import { mixin } from '../../libs/mixin/mixin';
   import defProps from '../../libs/config/props.js'
   import { addUnit, addStyle, deepMerge, getPx, sleep, sys } from '../../libs/function/index';
   import { addUnit, addStyle, deepMerge, getPx, sleep, getWindowInfo } from '../../libs/function/index';
   /**
    * Tabs 标签
    * @description tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。
@@ -128,7 +130,11 @@
            handler (newValue, oldValue) {
               // 内外部值不相等时，才尝试移动滑块
               if (newValue !== this.innerCurrent) {
                  if (typeof newValue == 'string') {
                     this.innerCurrent = parseInt(newValue)
                  } else {
                  this.innerCurrent = newValue
                  }
                  this.$nextTick(() => {
                     this.resize()
                  })
@@ -147,7 +153,9 @@
            return index => {
               const style = {}
               // 取当期是否激活的样式
               const customeStyle = index === this.innerCurrent ? addStyle(this.activeStyle) : addStyle(this.inactiveStyle)
               const customeStyle = (index == this.innerCurrent)
                  ? addStyle(this.activeStyle) 
                  : addStyle(this.inactiveStyle)
               // 如果当前菜单被禁用，则加上对应颜色，需要在此做处理，是因为nvue下，无法在style样式中通过!import覆盖标签的内联样式
               if (this.list[index].disabled) {
                  style.color = '#c8c9cc'
@@ -178,7 +186,6 @@
                // 获取下划线的数值px表示法
            const lineWidth = getPx(this.lineWidth);
            this.lineOffsetLeft = lineOffsetLeft + (tabItem.rect.width - lineWidth) / 2
            console.log(lineOffsetLeft)
            // #ifdef APP-NVUE
            // 第一次移动滑块，无需过渡时间
            this.animation(this.lineOffsetLeft, this.firstTime ? 0 : parseInt(this.duration))
@@ -235,6 +242,9 @@
         },
         setScrollLeft() {
            // 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
            if (this.innerCurrent < 0) {
                    this.innerCurrent = 0;
                }
            const tabRect = this.list[this.innerCurrent]
            // 累加得到当前item到左边的距离
            const offsetLeft = this.list
@@ -243,7 +253,7 @@
                  return total + curr.rect.width
               }, 0)
            // 此处为屏幕宽度
            const windowWidth = sys().windowWidth
            const windowWidth = getWindowInfo().windowWidth
            // 将活动的tabs-item移动到屏幕正中间，实际上是对scroll-view的移动
            let scrollLeft = offsetLeft - (this.tabsRect.width - tabRect.rect.width) / 2 - (windowWidth - this.tabsRect
               .right) / 2 + this.tabsRect.left / 2
@@ -360,9 +370,7 @@
               &__text {
                  font-size: 15px;
                  color: $u-content-color;
                  /* #ifndef APP-NVUE */
                        white-space: nowrap !important;
                  /* #endif */

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