From 5a605bf05ab9d25234f0779e42d60b936e5da903 Mon Sep 17 00:00:00 2001
From: yanyilin <yanyilin@dcloud.io>
Date: Sat, 9 Sep 2023 16:39:02 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E2=80=9C=E5=A4=8D=E6=9D=82?=
 =?UTF-8?q?=E9=95=BF=E5=88=97=E8=A1=A8=E2=80=9D=E7=A4=BA=E4=BE=8Bview?=
 =?UTF-8?q?=E7=9A=84=E5=B1=82=E7=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/template/long-list/long-list.uvue | 529 ++++++++++++------------
 1 file changed, 263 insertions(+), 266 deletions(-)

diff --git a/pages/template/long-list/long-list.uvue b/pages/template/long-list/long-list.uvue
index 5b675de6..b3d1d109 100644
--- a/pages/template/long-list/long-list.uvue
+++ b/pages/template/long-list/long-list.uvue
@@ -1,266 +1,263 @@
-<template>
-  <scroll-view ref="pageScrollView" class="page" :scroll-y="true" :rebound="false"
-    @startnestedscroll="onStartNestedScroll" @nestedprescroll="onNestedPreScroll">
-    <view ref="header" class="search-bar">
-      <input placeholder="搜索..." />
-    </view>
-    <view class="swiper-list">
-      <scroll-view ref="tabScroll" class="swiper-tabs" :scroll-x="true" :show-scrollbar="false">
-        <!-- TODO 多一层 view -->
-        <view style="align-self: flex-start; align-items: flex-start;">
-          <view class="flex-row">
-            <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>
-        </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 longPage from './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 | INode,
-        $headerHeight: 0,
-        $animationFinishIndex: 0,
-        $tabScrollView: null as null | INode,
-        $indicatorNode: null as null | INode,
-        $swiperWidth: 0,
-        $swiperTabsRect: [] as SwiperTabsItem[]
-      }
-    },
-    onReady() {
-      this.$pageScrollView = this.$refs['pageScrollView'] as INode;
-      this.$headerHeight = (this.$refs["header"] as INode).offsetHeight
-      this.$swiperWidth = (this.$refs["swiper"] as INode).getBoundingClientRect().width
-      this.$tabScrollView = this.$refs.get('tabScroll') as INode
-      this.$indicatorNode = this.$refs.get('indicator') as INode
-      this.cacheTabItemsSize()
-      this.setSwiperIndex(0, true)
-    },
-    onPullDownRefresh() {
-      (this.$refs["longPage"]! as ComponentPublicInstance[])[this.swiperIndex].$callMethod('refreshData', () => {
-        uni.stopPullDownRefresh()
-      })
-    },
-    methods: {
-      // TODO
-      onStartNestedScroll(event : 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())
-            }
-          }
-        } else if (deltaY < 0) {
-          // 向下滚动，如果父容器 scrollTop > 0，通知子被父容器消耗，然后滚动到 0
-          if (scrollTop > 0) {
-            event.consumed(event.deltaX, deltaY)
-            this.$pageScrollView!.scrollBy(event.deltaX, deltaY)
-          }
-        }
-      },
-      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 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.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;
-  }
-
-  .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>
+<template>
+  <scroll-view ref="pageScrollView" class="page" :scroll-y="true" :rebound="false"
+    @startnestedscroll="onStartNestedScroll" @nestedprescroll="onNestedPreScroll">
+    <view ref="header" class="search-bar">
+      <input placeholder="搜索..." />
+    </view>
+    <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 longPage from './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 | INode,
+        $headerHeight: 0,
+        $animationFinishIndex: 0,
+        $tabScrollView: null as null | INode,
+        $indicatorNode: null as null | INode,
+        $swiperWidth: 0,
+        $swiperTabsRect: [] as SwiperTabsItem[]
+      }
+    },
+    onReady() {
+      this.$pageScrollView = this.$refs['pageScrollView'] as INode;
+      this.$headerHeight = (this.$refs["header"] as INode).offsetHeight
+      this.$swiperWidth = (this.$refs["swiper"] as INode).getBoundingClientRect().width
+      this.$tabScrollView = this.$refs.get('tabScroll') as INode
+      this.$indicatorNode = this.$refs.get('indicator') as INode
+      this.cacheTabItemsSize()
+      this.setSwiperIndex(0, true)
+    },
+    onPullDownRefresh() {
+      (this.$refs["longPage"]! as ComponentPublicInstance[])[this.swiperIndex].$callMethod('refreshData', () => {
+        uni.stopPullDownRefresh()
+      })
+    },
+    methods: {
+      // TODO
+      onStartNestedScroll(event : 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())
+            }
+          }
+        } else if (deltaY < 0) {
+          // 向下滚动，如果父容器 scrollTop > 0，通知子被父容器消耗，然后滚动到 0
+          if (scrollTop > 0) {
+            event.consumed(event.deltaX, deltaY)
+            this.$pageScrollView!.scrollBy(event.deltaX, deltaY)
+          }
+        }
+      },
+      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 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.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;
+  }
+
+  .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>
\ No newline at end of file
-- 
GitLab