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>