From 80da005edc439e8c331e9f6402323aff7dd6086e Mon Sep 17 00:00:00 2001
From: hdx <hdx@dcloud.io>
Date: Wed, 23 Aug 2023 16:04:16 +0800
Subject: [PATCH] =?UTF-8?q?long-list:=20=E5=BD=93=20swiper=20item=20?=
 =?UTF-8?q?=E9=A6=96=E6=AC=A1=E5=8F=AF=E8=A7=81=E6=97=B6=E5=88=9D=E5=A7=8B?=
 =?UTF-8?q?=E5=8C=96=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/template/long-list/long-list-page.uvue |  8 ++++--
 pages/template/long-list/long-list.uvue      | 30 ++++++++++++++------
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/pages/template/long-list/long-list-page.uvue b/pages/template/long-list/long-list-page.uvue
index aab96e08..8a52e8f2 100644
--- a/pages/template/long-list/long-list-page.uvue
+++ b/pages/template/long-list/long-list-page.uvue
@@ -66,9 +66,13 @@
         family: 'UtsIconsFontFamily',
         source: '/static/fonts/icon-star.ttf'
       })
-      this.loadData()
     },
     methods: {
+      init() {
+        if (this.dataList.length == 0) {
+          this.loadData()
+        }
+      },
       loadData() {
         if (this.loading || this.isEnded) {
           return
@@ -94,7 +98,7 @@
               this.dataList.push(item)
             })
 
-            if (responseData.data.length <= 0) {
+            if (responseData.data.length == 0) {
               this.isEnded = true
             } else {
               this.$currentPage++
diff --git a/pages/template/long-list/long-list.uvue b/pages/template/long-list/long-list.uvue
index 0426dd3b..fe561483 100644
--- a/pages/template/long-list/long-list.uvue
+++ b/pages/template/long-list/long-list.uvue
@@ -22,7 +22,7 @@
       <swiper class="swiper-view" ref="swiper" :current="swiperIndex" @change="onSwiperChange"
         @transition="onSwiperTransition" @animationfinish="onSwiperAnimationfinish">
         <swiper-item class="swiper-item" v-for="(item, index) in swiperList" :key="index">
-          <long-page :type="item.type"></long-page>
+          <long-page ref="longPage" :type="item.type"></long-page>
         </swiper-item>
       </swiper>
     </view>
@@ -39,7 +39,8 @@
 
   type SwiperViewItem = {
     type : string,
-    name : string
+    name : string,
+    init : Boolean,
   }
 
   // 测试数据
@@ -98,19 +99,22 @@
         this.setSwiperIndex(e.detail.current, false)
       },
       onSwiperTransition(e : SwiperTransitionEvent) {
-        const offsetX = e.detail.dx;
+        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;
+        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)
+
+        this.initSwiperItemPage(moveToIndex)
 
-        this.updateTabIndicator(indicatorlineL, indicatorlineW);
         //console.log(this.$lastSwiperIndex, moveToIndex, offsetX, this.$swiperWidth, percentage);
       },
       onSwiperAnimationfinish(e : SwiperAnimationFinishEvent) {
@@ -134,10 +138,18 @@
         }
         this.swiperIndex = index
 
+        this.initSwiperItemPage(index)
+
         if (updateIndicator) {
           this.updateTabIndicator(this.$swiperTabsRect[index].left, this.$swiperTabsRect[index].width)
         }
       },
+      initSwiperItemPage(index : Number) {
+        if (!this.swiperList[index].init) {
+          this.swiperList[index].init = true;
+          (this.$refs["longPage"] as ComponentPublicInstance[])[index].$callMethod('init')
+        }
+      },
       updateTabIndicator(left : Number, width : Number) {
         this.swiperIndicatorLineLeft = left
         this.swiperIndicatorLineWidth = width
-- 
GitLab