fix: 修复pi-tabs下标超长报错

sadais-org · Oct 13, 2020 · 893b5a7 · 893b5a7
1 parent 5b47d8b
commit 893b5a7
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/components/pi-regions-select/index.vue b/components/pi-regions-select/index.vue
@@ -44,8 +44,8 @@
         </template>
       </view>
       <pi-tabs v-if="val" v-model="tabCurrentItem" :items="getTabItems" />
-      <swiper class="pi-scroll" :current-item-id="tabCurrentItem.id" @change="handleSwiperChange">
-        <swiper-item v-for="item in getTabItems" :key="item.id" :item-id="item.id">
+      <swiper class="pi-scroll" :current="tabCurrent" @change="handleSwiperChange">
+        <swiper-item v-for="item in getTabItems" :key="item.id">
           <!-- 选择区域 -->
           <scroll-view class="pi-h-100P" scroll-y scroll-with-animation>
             <view
@@ -298,9 +298,13 @@ export default {
         lineHeight: itemHeight
       }
     },
+    tabCurrent() {
+      return this.getTabItems.findIndex(t => t.id === this.tabCurrentItem.id)
+    },
     getRegions() {
       const regionsKey = this.tabCurrentItem.id
-      return this.regions[regionsKey].regions || []
+      const regions = this.regions[regionsKey].regions || []
+      return regions
     },
     getSelectCode() {
       const regionsKey = this.tabCurrentItem.id
@@ -361,14 +365,13 @@ export default {
         this.regions[regionsKey].name = item.name
         this.regions.code = item.code
       }
-
       setTimeout(() => {
         // 如果当前tab激活项不是最后一个，向右移动一项
         const tabIndex = this.getTabItems.findIndex(t => t.id === regionsKey)
         if (tabIndex !== this.getTabItems.length - 1) {
           this.tabCurrentItem = this.getTabItems[tabIndex + 1]
         }
-      }, 30)
+      }, 50)
     },
     handleConfirm() {
       this.regions.generateName()

diff --git a/components/pi-tabs/index.vue b/components/pi-tabs/index.vue
@@ -221,7 +221,9 @@ export default {
     scrollLeft() {
       if (!this.tabRects.length) return
       // 计算当前激活item移动到容器中心距离左边距离
-      const activeRect = this.tabRects[this.activeIndex]
+      const activeIndex =
+        this.activeIndex >= this.tabRects.length ? this.tabRects.length - 1 : this.activeIndex
+      const activeRect = this.tabRects[activeIndex]
       const activeRectWidth = activeRect.width
       const activeRectLeft = activeRect.left
       const scrollLeft = activeRectLeft - this.tabsLeft - this.tabsWidth / 2 + activeRectWidth / 2
@@ -235,7 +237,9 @@ export default {
         transitionDuration: `${this.duration / 1000}s`
       }
       if (!this.tabRects.length) return style
-      const activeRect = this.tabRects[this.activeIndex]
+      const activeIndex =
+        this.activeIndex >= this.tabRects.length ? this.tabRects.length - 1 : this.activeIndex
+      const activeRect = this.tabRects[activeIndex]
       const activeRectWidth = activeRect.width
       const activeRectLeft = activeRect.left
       let sliderScrollLeft = activeRectLeft - this.tabsLeft