feat: swiper-list

pages.json

@@ -689,6 +689,12 @@
 				"navigationBarTitleText": "详情示例"
 			}
 		},
+		{
+			"path": "pages/template/swiper-list/swiper-list",
+			"style": {
+				"navigationBarTitleText": "swiper-list"
+			}
+		},
 		{
 			"path": "pages/template/swiper-vertical-video/swiper-vertical-video",
 			"style": {

pages/tabBar/template.uvue

@@ -106,7 +106,7 @@ export default {
           url: 'swiper-list',
           name: 'swiper-list',
           open: false,
-          enable: false,
+          enable: true,
           pages: [] as Page[],
         },
         {

pages/template/swiper-list/swiper-list.uvue

+<template>
+  <view class="swiper-list">
+    <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 ? 'uni-tab-item-title-active' : ''">{{item.title}}</text>
+          </view>
+        </view>
+        <view class="swiper-tabs-indicator">
+          <view class="swiper-tabs-underline"
+            :style="{left: swiperIndicatorLineLeft + 'px', width: swiperIndicatorLineWidth + 'px'}"></view>
+        </view>
+      </view>
+    </scroll-view>
+    <swiper class="swiper-view" ref="swiper" :current="swiperIndex" :duration="300" @change="onSwiperChange"
+      @transition="onSwiperTransition" @animationfinish="onSwiperAnimationfinish">
+      <swiper-item class="swiper-item" v-for="(_, index) in swiperList" :key="index">
+        <text class="swiper-item-text">{{index}}</text>
+      </swiper-item>
+    </swiper>
+  </view>
+</template>
+
+<script>
+  type SwiperTabsItem = {
+    left : number,
+    width : number
+  }
+
+  type SwiperViewItem = {
+    title : string
+  }
+
+  export default {
+    data() {
+      return {
+        swiperList: [] as SwiperViewItem[],
+        swiperIndex: -1,
+        tabsScrollLeft: 0,
+        swiperIndicatorLineLeft: 0,
+        swiperIndicatorLineWidth: 0,
+        $lastSwiperIndex: 0,
+        $swiperWidth: 0,
+        $swiperTabsRect: [] as SwiperTabsItem[],
+        $isTap: false
+      }
+    },
+    onLoad() {
+      for (let i = 0; i < 8; i++) {
+        this.swiperList.push({
+          title: "TAB " + i
+        } as SwiperViewItem)
+      }
+    },
+    onReady() {
+      this.$swiperWidth = (this.$refs["swiper"]! as INode)!?.offsetWidth! as number;
+      this.queryTabItemsSize();
+      this.setSwiperIndex(0, true);
+    },
+    methods: {
+      onTabClick(index : number) {
+        this.setSwiperIndex(index, false);
+      },
+      onSwiperChange(e : SwiperChangeEvent) {
+        this.setSwiperIndex(e.detail.current, false);
+        console.log("onSwiperChange", e.detail.current);
+      },
+      onSwiperTransition(e : SwiperTransitionEvent) {
+        const offsetX = e.detail.dx;
+
+        let moveToIndex = offsetX > 0 ? this.$lastSwiperIndex + 1 : this.$lastSwiperIndex - 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 moveToSize = this.$swiperTabsRect[moveToIndex];
+        const indicatorlineL = currentSize.left + (moveToSize.left - currentSize.left) * percentage;
+        const indicatorlineW = currentSize.width + (moveToSize.width - currentSize.width) * percentage;
+
+        this.updateTabIndicator(indicatorlineL, indicatorlineW);
+        //console.log(this.$lastSwiperIndex, moveToIndex, offsetX, this.$swiperWidth, percentage);
+      },
+      // TODO 事件触发时机不对
+      onSwiperAnimationfinish(e : SwiperAnimationFinishEvent) {
+        this.$lastSwiperIndex = e.detail.current;
+        console.log("onSwiperAnimationfinish", e.detail.current);
+        // this.setSwiperIndex(e.detail.current, true);
+      },
+      queryTabItemsSize() {
+        this.$swiperTabsRect.length = 0;
+        const tabs = this.$refs["swipertab"] as INode[]
+        tabs.forEach((node) => {
+          this.$swiperTabsRect.push({
+            left: node.offsetLeft as number,
+            width: node.offsetWidth as number
+          } as SwiperTabsItem)
+        })
+      },
+      setSwiperIndex(index : Number, updateIndicator : Boolean) {
+        if (this.swiperIndex === index) {
+          return;
+        }
+        this.swiperIndex = index;
+
+        if (updateIndicator) {
+          this.updateTabIndicator(this.$swiperTabsRect[index].left, this.$swiperTabsRect[index].width);
+        }
+      },
+      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;
+        }
+      }
+    }
+  }
+</script>
+
+<style>
+  .flex-row {
+    flex-direction: row;
+  }
+
+  .swiper-list {
+    flex: 1;
+  }
+
+  .swiper-tabs {
+    background-color: #ffffff;
+  }
+
+  .swiper-tabs-item {
+    padding: 12px 25px;
+  }
+
+  .swiper-tabs-item-text {
+    color: #555;
+    font-size: 16px;
+  }
+
+  .swiper-tabs-item-text-active {
+    color: #007AFF;
+  }
+
+  .swiper-tabs-indicator {
+    position: relative;
+    height: 2px;
+  }
+
+  .swiper-tabs-underline {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 0;
+    background-color: #007AFF;
+  }
+
+  .swiper-tabs-animation {
+    transition-duration: 0.2s;
+    transition-property: left;
+  }
+
+  .swiper-view {
+    flex: 1;
+  }
+
+  .swiper-item {
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .swiper-item-text {
+    font-size: 72px;
+    font-weight: bold;
+    margin: auto;
+  }
+</style>
\ No newline at end of file