swiper-list2.uvue

<template>
  <view class="swiper-list">
    <scroll-view ref="tabScroll" class="swiper-tabs" :scroll-x="true" :show-scrollbar="false">
      <view class="flex-row" style="align-self: flex-start;">
        <text ref="swipertab" class="swiper-tabs-item" :class="swiperIndex==index ? 'swiper-tabs-item-active' : ''"
          v-for="(item, index) in swiperList" :key="index" @click="onTabClick(index)">
          {{item.title}}
        </text>
      </view>
    </scroll-view>
    <swiper ref="swiper" class="swiper-view" :current="swiperIndex" @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 SwiperViewItem = {
    title : string,
  }

  export default {
    data() {
      return {
        swiperList: [] as SwiperViewItem[],
        swiperIndex: -1,
        $tabScrollView: null as null | INode,
        $animationFinishIndex: 0,
        $swiperWidth: 0
      }
    },
    onLoad() {
      for (let i = 0; i < 4; i++) {
        this.swiperList.push({
          title: "Tab " + i
        } as SwiperViewItem)
      }
    },
    onReady() {
      this.$tabScrollView = this.$refs.get('tabScroll') as INode
      this.$swiperWidth = (this.$refs["swiper"] as INode).getBoundingClientRect().width
      this.setSwiperIndex(0, true)
    },
    methods: {
      onTabClick(index : number) {
        this.setSwiperIndex(index, false)
      },
      onSwiperTransition(e : SwiperTransitionEvent) {
        const offset_x = e.detail.dx

        // 计算当前索引并重置差异
        const current_offset_x = offset_x % this.$swiperWidth
        const current_offset_i = offset_x / this.$swiperWidth
        const current_index = this.$animationFinishIndex + current_offset_i.toInt()

        // 计算目标索引及边界检查
        let move_to_index = current_index
        if (current_offset_x > 0 && move_to_index < this.swiperList.length - 1) {
          move_to_index += 1
        } else if (current_offset_x < 0 && move_to_index > 0) {
          move_to_index -= 1
        }

        // 计算偏移百分比
        const percentage = Math.abs(current_offset_x) / this.$swiperWidth

        // 通知更新指示线
        this.updateTabIndicator(current_index, move_to_index, percentage)
      },
      onSwiperAnimationfinish(e : SwiperAnimationFinishEvent) {
        this.setSwiperIndex(e.detail.current, true)
        this.$animationFinishIndex = e.detail.current
      },
      setSwiperIndex(index : number, updateIndicator : boolean) {
        if (this.swiperIndex == index) {
          return
        }

        this.swiperIndex = index

        if (updateIndicator) {
          this.updateTabIndicator(index, index, 1)
        }
      },
      updateTabIndicator(current_index : number, move_to_index : number, percentage : number) {
        if (percentage == 0) {
          return
        }

        // 缩放范围
        const min_ratio = 1
        const max_ratio = 1.5

        const tabs = this.$refs["swipertab"] as INode[]
        const current_node = tabs[current_index]!
        const move_to_node = tabs[move_to_index]!

        // 当前
        const current_scale = this.lerpNumber(min_ratio, max_ratio, 1 - percentage)
        current_node.style?.setProperty('transform', `scale(${current_scale})`)

        // 目标
        const move_to_scale = this.lerpNumber(min_ratio, max_ratio, percentage)
        move_to_node.style?.setProperty('transform', `scale(${move_to_scale})`)

        // 滚动到水平中心位置
        const target_x = current_node.offsetLeft + (move_to_node.offsetLeft - current_node.offsetLeft) * percentage
        const center_x = target_x + move_to_node.offsetWidth / 2 - this.$swiperWidth / 2
        this.$tabScrollView?.setAttribute('scrollLeft', center_x)
      },
      /**
       * 根据权重在两个值之间执行线性插值.
       * @constructor
       * @param {number} value1 - 第一个值，该值应为下限.
       * @param {number} value2 - 第二个值，该值应为上限.
       * @param {number} amount - 应介于 0 和 1 之间，指示内插的权重.
       * @returns {number} 内插值
       */
      lerpNumber(value1 : number, value2 : number, amount : number) : number {
        return (value1 + (value2 - value1) * amount)
      }
    }
  }
</script>

<style>
  .flex-row {
    flex-direction: row;
  }

  .swiper-list {
    flex: 1;
  }

  .swiper-tabs-item {
    color: #555;
    font-size: 16px;
    padding: 12px 25px 5px 25px;
    transform-origin: left bottom;
  }

  .swiper-tabs-item-active {
    color: #000000;
  }

  .swiper-view {
    flex: 1;
  }

  .swiper-item {
    flex: 1;
    align-items: center;
    justify-content: center;
  }

  .swiper-item-text {
    font-size: 72px;
    font-weight: bold;
  }
</style>