long-list: 优化tab布局；调整蛇形线算法,同时兼容微信webview和skyline

pages/template/long-list/long-list.uvue

@@ -7,11 +7,10 @@
       <scroll-view class="swiper-tabs" :scroll-left="tabsScrollLeft" :scroll-x="true" :show-scrollbar="false">
         <view>
           <view class="flex-row">
-            <view class="swiper-tabs-item" v-for="(item, index) in swiperList" :id="'swipertab' + index" ref="swipertab"
-              :key="index" @click="onTabClick(index)">
-              <text class="swiper-tabs-item-text"
-                :class="swiperIndex==index ? 'swiper-tabs-item-text-active' : ''">{{item.name}}</text>
-            </view>
+            <text class="swiper-tabs-item" :class="swiperIndex==index ? 'swiper-tabs-item-active' : ''"
+              v-for="(item, index) in swiperList" ref="swipertab" :key="index" @click="onTabClick(index)">
+              {{item.name}}
+            </text>
           </view>
           <view class="swiper-tabs-indicator">
             <view class="swiper-tabs-underline"
@@ -19,8 +18,8 @@
           </view>
         </view>
       </scroll-view>
-      <swiper class="swiper-view" ref="swiper" :current="swiperIndex" @change="onSwiperChange"
-        @transition="onSwiperTransition" @animationfinish="onSwiperAnimationfinish">
+      <swiper class="swiper-view" ref="swiper" :current="swiperIndex" @transition="onSwiperTransition"
+        @animationfinish="onSwiperAnimationfinish">
         <swiper-item class="swiper-item" v-for="(item, index) in swiperList" :key="index">
           <long-page ref="longPage" :type="item.type" :preload="item.preload"></long-page>
         </swiper-item>
@@ -74,10 +73,9 @@
         swiperIndicatorLineLeft: 0,
         swiperIndicatorLineWidth: 0,
         $headerHeight: 0,
-        $lastSwiperIndex: 0,
+        $animationFinishIndex: 0,
         $swiperWidth: 0,
-        $swiperTabsRect: [] as SwiperTabsItem[],
-        $isTap: false
+        $swiperTabsRect: [] as SwiperTabsItem[]
       }
     },
     onReady() {
@@ -90,18 +88,18 @@
       onTabClick(index : number) {
         this.setSwiperIndex(index, false)
       },
-      onSwiperChange(e : SwiperChangeEvent) {
-        this.setSwiperIndex(e.detail.current, false)
-      },
       onSwiperTransition(e : SwiperTransitionEvent) {
         const offsetX = e.detail.dx
+        // 兼容微信 skyline 和 webview
+        const offsetIndex = Math.abs(offsetX.toInt()) == this.$swiperWidth ? 0 : offsetX / this.$swiperWidth
+        const currentIndex = this.$animationFinishIndex + Math.abs(offsetIndex.toInt())
 
-        let moveToIndex = offsetX > 0 ? this.$lastSwiperIndex + 1 : this.$lastSwiperIndex - 1
+        let moveToIndex = offsetX > 0 ? currentIndex + 1 : currentIndex - 1
         if (moveToIndex < 0) { moveToIndex = 0 }
         if (moveToIndex > this.$swiperTabsRect.length - 1) { moveToIndex = this.$swiperTabsRect.length - 1 }
 
         const percentage = Math.abs(offsetX) / this.$swiperWidth
-        const currentSize = this.$swiperTabsRect[this.$lastSwiperIndex]
+        const currentSize = this.$swiperTabsRect[currentIndex]
         const moveToSize = this.$swiperTabsRect[moveToIndex]
         const indicatorlineL = currentSize.left + (moveToSize.left - currentSize.left) * percentage
         const indicatorlineW = currentSize.width + (moveToSize.width - currentSize.width) * percentage
@@ -109,16 +107,13 @@
         this.updateTabIndicator(indicatorlineL, indicatorlineW)
 
         this.initSwiperItemPage(moveToIndex)
-
-        //console.log(this.$lastSwiperIndex, moveToIndex, offsetX, this.$swiperWidth, percentage);
       },
       onSwiperAnimationfinish(e : SwiperAnimationFinishEvent) {
-        // console.log("onSwiperAnimationfinish", e.detail.current);
-        this.$lastSwiperIndex = e.detail.current
         this.setSwiperIndex(e.detail.current, true)
+        this.$animationFinishIndex = e.detail.current
       },
       queryTabItemsSize() {
-        this.$swiperTabsRect.length = 0;
+        this.$swiperTabsRect.length = 0
         const tabs = this.$refs["swipertab"] as INode[]
         tabs.forEach((node) => {
           this.$swiperTabsRect.push({
@@ -139,18 +134,15 @@
           this.updateTabIndicator(this.$swiperTabsRect[index].left, this.$swiperTabsRect[index].width)
         }
       },
-      initSwiperItemPage(index : Number) {
-        if (!this.swiperList[index].preload) {
-          this.swiperList[index].preload = true;
-          (this.$refs["longPage"] as ComponentPublicInstance[])[index].$callMethod('loadData')
-        }
-      },
       updateTabIndicator(left : Number, width : Number) {
         this.swiperIndicatorLineLeft = left
         this.swiperIndicatorLineWidth = width
-        const offset = left + width / 2
-        if (offset > this.$swiperWidth / 2) {
-          this.tabsScrollLeft = offset - this.$swiperWidth / 2
+        this.tabsScrollLeft = left + width / 2 - this.$swiperWidth / 2
+      },
+      initSwiperItemPage(index : Number) {
+        if (!this.swiperList[index].preload) {
+          this.swiperList[index].preload = true;
+          (this.$refs["longPage"]! as ComponentPublicInstance[])[index].$callMethod('loadData')
         }
       }
     }
@@ -180,15 +172,12 @@
   }
 
   .swiper-tabs-item {
-    padding: 12px 25px;
-  }
-
-  .swiper-tabs-item-text {
     color: #555;
     font-size: 16px;
+    padding: 12px 25px;
   }
 
-  .swiper-tabs-item-text-active {
+  .swiper-tabs-item-active {
     color: #007AFF;
   }