long-list.uvue

<template>
  <scroll-view class="page" :scroll-top="pageScrollTop">
    <view class="search-bar" ref="header">
      <input placeholder="搜索..." />
    </view>
    <view class="swiper-list">
      <scroll-view class="swiper-tabs" :scroll-left="tabsScrollLeft" :scroll-x="true" :show-scrollbar="false">
        <view>
          <view class="flex-row">
            <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"
              :style="{left: swiperIndicatorLineLeft + 'px', width: swiperIndicatorLineWidth + 'px'}"></view>
          </view>
        </view>
      </scroll-view>
      <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>
      </swiper>
    </view>
  </scroll-view>
</template>

<script>
  import longPage from './long-list-page.uvue';

  type SwiperTabsItem = {
    x : number,
    w : number
  }

  type SwiperViewItem = {
    type : string,
    name : string,
    preload : Boolean,
  }

  export default {
    components: {
      longPage
    },
    data() {
      return {
        pageScrollTop: 0,
        swiperList: [
          {
            type: 'UpdatedDate',
            name: '最新上架',
            preload: true
          } as SwiperViewItem,
          {
            type: 'FreeHot',
            name: '免费热榜'
          } as SwiperViewItem,
          {
            type: 'PaymentHot',
            name: '付费热榜'
          } as SwiperViewItem,
          {
            type: 'HotList',
            name: '热门总榜'
          } as SwiperViewItem
        ] as SwiperViewItem[],
        swiperIndex: -1,
        tabsScrollLeft: 0,
        swiperIndicatorLineLeft: 0,
        swiperIndicatorLineWidth: 0,
        $headerHeight: 0,
        $animationFinishIndex: 0,
        $swiperWidth: 0,
        $swiperTabsRect: [] as SwiperTabsItem[]
      }
    },
    onReady() {
      this.$headerHeight = (this.$refs["header"] as INode).offsetHeight
      this.$swiperWidth = (this.$refs["swiper"] as INode).getBoundingClientRect().width
      this.queryTabItemsSize()
      this.setSwiperIndex(0, true)
    },
    methods: {
      onTabClick(index : number) {
        this.setSwiperIndex(index, false)
      },
      /// 兼容微信 skyline 和 webview, uni-app-x 和 webview 行为一致
      /// skyline 每项完成触发 Animationfinish，偏移值重置
      /// webview 全部完成触发 Animationfinish，偏移值累加
      /// 在滑动到下一个项的过程中，再次反向滑动，偏移值递减
      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) {
          if (move_to_index < this.$swiperTabsRect.length - 1) {
            move_to_index += 1
          }
        } else if (current_offset_x < 0) {
          if (move_to_index > 0) {
            move_to_index -= 1
          }
        }

        // 计算蛇形线位置和大小
        const percentage = Math.abs(current_offset_x) / this.$swiperWidth
        const current_size = this.$swiperTabsRect[current_index]
        const move_to_size = this.$swiperTabsRect[move_to_index]
        const indicator_line_l = current_size.x + (move_to_size.x - current_size.x) * percentage
        const indicator_line_w = current_size.w + (move_to_size.w - current_size.w) * percentage

        // 更新蛇形线位置和大小
        // 这代码写的不对，不能在拖动滚动中使用vue绑定样式，只能用ref+transform
        // this.updateTabIndicator(indicator_line_l, indicator_line_w)

        // 首次可见时初始化数据
        this.initSwiperItemPage(move_to_index)
      },
      onSwiperAnimationfinish(e : SwiperAnimationFinishEvent) {
        this.setSwiperIndex(e.detail.current, true)
        this.$animationFinishIndex = e.detail.current
      },
      queryTabItemsSize() {
        this.$swiperTabsRect.length = 0
        const tabs = this.$refs["swipertab"] as INode[]
        tabs.forEach((node) => {
          this.$swiperTabsRect.push({
            x: node.offsetLeft,
            w: node.offsetWidth
          } as SwiperTabsItem)
        })
      },
      setSwiperIndex(index : Number, updateIndicator : Boolean) {
        if (this.swiperIndex === index) {
          return
        }
        this.swiperIndex = index

        this.initSwiperItemPage(index)

        if (updateIndicator) {
          this.updateTabIndicator(this.$swiperTabsRect[index].x, this.$swiperTabsRect[index].w)
        }
      },
      updateTabIndicator(left : Number, width : Number) {
        this.swiperIndicatorLineLeft = left
        this.swiperIndicatorLineWidth = width
        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')
        }
      }
    }
  }
</script>

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

  .page {
    flex: 1;
  }

  .search-bar {
    padding: 10px;
  }

  .swiper-list {
    flex: 1;
    /* height: 100%; */
  }

  .swiper-tabs {
    background-color: #ffffff;
  }

  .swiper-tabs-item {
    color: #555;
    font-size: 16px;
    padding: 12px 25px;
  }

  .swiper-tabs-item-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-view {
    flex: 1;
  }

  .swiper-item {
    flex: 1;
  }
</style>