add long-list2.uvue

pages.json

@@ -916,6 +916,13 @@
         "navigationBarTitleText": "复杂长列表",
         "enablePullDownRefresh": true
       }
+    },
+    {
+      "path": "pages/template/long-list2/long-list2",
+      "style": {
+        "navigationBarTitleText": "复杂长列表2",
+        "enablePullDownRefresh": true
+      }
     },
     {
       "path": "pages/component/list-view/list-view",
@@ -996,7 +1003,7 @@
     },
     {
       "path" : "pages/API/element-draw/element-draw",
-      "style" : 
+      "style" :
       {
         "navigationBarTitleText" : "getDrawableContext",
         "enablePullDownRefresh" : false
@@ -1004,7 +1011,7 @@
     },
     {
       "path" : "pages/component/general-event/transition-event",
-      "style" : 
+      "style" :
       {
         "navigationBarTitleText" : "transitionend事件",
         "enablePullDownRefresh" : false

pages/tabBar/template.uvue

@@ -82,10 +82,19 @@ export default {
         {
           id: 'long-list',
           url: 'long-list',
-          name: '复杂长列表',
+          name: '左右滑动长列表',
           open: false,
           enable: true,
-          pages: [] as Page[],
+          pages: [
+            {
+              name: '顶部搜索框随时下移长列表',
+              url:'long-list'
+            },
+            {
+              name: '顶部banner长列表',
+              url:'long-list2'
+            },
+          ] as Page[],
         },
         {
           id: 'list-news',

pages/template/long-list2/long-list2.uvue

+<template>
+  <scroll-view ref="pageScrollView" class="page" :scroll-y="true" :rebound="false"
+    @startnestedscroll="onStartNestedScroll" @nestedprescroll="onNestedPreScroll">
+    <swiper ref="header" indicator-dots="true" circular="true">
+      <swiper-item  v-for="i in 3" :item-id="i">
+        <image src="/static/shuijiao.jpg" style="height: 240px;"></image>
+        <text style="position: absolute;">{{i}}</text>
+      </swiper-item>
+    </swiper>
+    <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.name}}
+          </text>
+        </view>
+        <view ref="indicator" class="swiper-tabs-indicator"></view>
+      </scroll-view>
+      <swiper ref="swiper" class="swiper-view" :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 { ComponentPublicInstance } from 'vue';
+  import longPage from '../long-list/long-list-page.uvue';
+
+  type SwiperTabsItem = {
+    x : number,
+    w : number
+  }
+
+  type SwiperViewItem = {
+    type : string,
+    name : string,
+    preload : boolean,
+  }
+
+  /**
+   * 根据权重在两个值之间执行线性插值.
+   * @constructor
+   * @param {number} value1 - 第一个值，该值应为下限.
+   * @param {number} value2 - 第二个值，该值应为上限.
+   * @param {number} amount - 应介于 0 和 1 之间，指示内插的权重.
+   * @returns {number} 内插值
+   */
+  function lerpNumber(value1 : number, value2 : number, amount : number) : number {
+    return (value1 + (value2 - value1) * amount)
+  }
+
+  export default {
+    components: {
+      longPage
+    },
+    data() {
+      return {
+        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,
+        $pageScrollView: null as null | Element,
+        $headerHeight: 0,
+        $animationFinishIndex: 0,
+        $tabScrollView: null as null | Element,
+        $indicatorNode: null as null | Element,
+        $swiperWidth: 0,
+        $swiperTabsRect: [] as SwiperTabsItem[]
+      }
+    },
+    onReady() {
+      this.$pageScrollView = this.$refs['pageScrollView'] as Element;
+      this.$headerHeight = (this.$refs['header'] as Element).offsetHeight
+      this.$swiperWidth = (this.$refs['swiper'] as Element).getBoundingClientRect().width
+      this.$tabScrollView = this.$refs['tabScroll'] as Element
+      this.$indicatorNode = this.$refs['indicator'] as Element
+      this.cacheTabItemsSize()
+      this.setSwiperIndex(0, true)
+    },
+    onPullDownRefresh() {
+      (this.$refs["longPage"]! as ComponentPublicInstance[])[this.swiperIndex].$callMethod('refreshData', () => {
+        uni.stopPullDownRefresh()
+      })
+    },
+    methods: {
+      // TODO
+      onStartNestedScroll(_ : StartNestedScrollEvent) : boolean {
+        return true
+      },
+      onNestedPreScroll(event : NestedPreScrollEvent) {
+        const deltaY = event.deltaY
+        const scrollTop = this.$pageScrollView!.scrollTop
+
+        if (deltaY > 0) {
+          // 向上滚动，如果父容器 header scrollTop < offsetHeight，先滚动父容器
+          if (scrollTop < this.$headerHeight) {
+            const difference = this.$headerHeight - scrollTop - deltaY
+            if (difference > 0) {
+              this.$pageScrollView!.scrollBy(event.deltaX, deltaY)
+              event.consumed(event.deltaX, deltaY)
+            } else {
+              const top : number = deltaY + difference
+              event.consumed(event.deltaX, top.toFloat())
+              this.$pageScrollView!.scrollBy(event.deltaX, top.toFloat())
+            }
+          }
+        }
+      },
+      onTabClick(index : number) {
+        this.setSwiperIndex(index, false)
+      },
+      onSwiperTransition(e : SwiperTransitionEvent) {
+        // 微信 skyline 每项完成触发 Animationfinish，偏移值重置
+        // 微信 webview 全部完成触发 Animationfinish，偏移值累加
+        // 在滑动到下一个项的过程中，再次反向滑动，偏移值递减
+        // uni-app-x 和微信 webview 行为一致
+
+        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)
+
+        // 首次可见时初始化数据
+        this.initSwiperItemData(move_to_index)
+      },
+      onSwiperAnimationfinish(e : SwiperAnimationFinishEvent) {
+        this.setSwiperIndex(e.detail.current, true)
+        this.$animationFinishIndex = e.detail.current
+      },
+      cacheTabItemsSize() {
+        this.$swiperTabsRect.length = 0
+        const tabs = this.$refs["swipertab"] as Element[]
+        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.initSwiperItemData(index)
+
+        if (updateIndicator) {
+          this.updateTabIndicator(index, index, 1)
+        }
+      },
+      updateTabIndicator(current_index : number, move_to_index : number, percentage : number) {
+        const current_size = this.$swiperTabsRect[current_index]
+        const move_to_size = this.$swiperTabsRect[move_to_index]
+
+        // 计算指示线 左边距 和 宽度 在移动过程中的线性值
+        const indicator_line_x = lerpNumber(current_size.x, move_to_size.x, percentage)
+        const indicator_line_w = lerpNumber(current_size.w, move_to_size.w, percentage)
+
+        // 更新指示线
+        const x = indicator_line_x + indicator_line_w / 2
+        this.$indicatorNode?.style?.setProperty('transform', `translateX(${x}px) scaleX(${indicator_line_w})`)
+
+        // 滚动到水平中心位置
+        const scroll_x = x - this.$swiperWidth / 2
+        this.$tabScrollView?.setAttribute('scrollLeft', scroll_x)
+      },
+      initSwiperItemData(index : number) {
+        if (!this.swiperList[index].preload) {
+          this.swiperList[index].preload = true;
+          (this.$refs["longPage"]! as ComponentPublicInstance[])[index].$callMethod('loadData', null)
+        }
+      }
+    }
+  }
+</script>
+
+<style>
+  .flex-row {
+    flex-direction: row;
+  }
+
+  .page {
+    flex: 1;
+  }
+
+  .search-bar {
+    padding: 10px;
+  }
+
+  .swiper-list {
+    height: 100%;
+  }
+
+  .swiper-tabs {
+    background-color: #ffffff;
+    flex-direction: column;
+  }
+
+  .swiper-tabs-item {
+    color: #555;
+    font-size: 16px;
+    padding: 12px 25px;
+  }
+
+  .swiper-tabs-item-active {
+    color: #007AFF;
+  }
+
+  .swiper-tabs-indicator {
+    width: 1px;
+    height: 2px;
+    background-color: #007AFF;
+  }
+
+  .swiper-view {
+    flex: 1;
+  }
+
+  .swiper-item {
+    flex: 1;
+  }
+</style>