From 34296d5d8a161e44e4b47f324b2f4db300a8c9a3 Mon Sep 17 00:00:00 2001
From: shutao <shutao@dcloud.io>
Date: Mon, 8 Apr 2024 17:14:09 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9Eswiper=E5=B5=8C=E5=A5=97list-?=
 =?UTF-8?q?view=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    |  8 +++
 .../component/swiper/swiper-list-view.test.js | 26 +++++++
 pages/component/swiper/swiper-list-view.uvue  | 69 +++++++++++++++++++
 pages/component/swiper/swiper.uvue            |  9 ++-
 4 files changed, 111 insertions(+), 1 deletion(-)
 create mode 100644 pages/component/swiper/swiper-list-view.test.js
 create mode 100644 pages/component/swiper/swiper-list-view.uvue

diff --git a/pages.json b/pages.json
index 3fa90a7b..fdc2f99c 100644
--- a/pages.json
+++ b/pages.json
@@ -1277,6 +1277,14 @@
         "navigationBarTitleText" : "自定义虚拟长列表",
         "enablePullDownRefresh" : false
       }
+    },
+    {
+      "path" : "pages/component/swiper/swiper-list-view",
+      "style" :
+      {
+        "navigationBarTitleText" : "swiper嵌套list-view",
+        "enablePullDownRefresh" : false
+      }
     }
     // #endif
   ],
diff --git a/pages/component/swiper/swiper-list-view.test.js b/pages/component/swiper/swiper-list-view.test.js
new file mode 100644
index 00000000..a8b1b998
--- /dev/null
+++ b/pages/component/swiper/swiper-list-view.test.js
@@ -0,0 +1,26 @@
+describe('component-swiper-list-view', () => {
+  let page
+  beforeAll(async () => {
+    //打开swiper-list-view测试页
+    page = await program.reLaunch('/pages/component/swiper/swiper-list-view')
+    await page.waitFor('list-view')
+  })
+
+  it('check-sticky-header', async () => {
+    await page.setData({scrollTop: 300})
+    await page.waitFor(600)
+    await page.setData({currentVal: 1})
+    await page.waitFor(async () => {
+      return await page.data('swiperCurrentIndex') === 1;
+    });
+    await page.waitFor(200)
+    await page.setData({currentVal: 0})
+    await page.waitFor(async () => {
+      return await page.data('swiperCurrentIndex') === 0;
+    });
+    await page.waitFor(600)
+    const image = await program.screenshot({fullPage: true});
+    expect(image).toSaveImageSnapshot();
+  })
+
+})
diff --git a/pages/component/swiper/swiper-list-view.uvue b/pages/component/swiper/swiper-list-view.uvue
new file mode 100644
index 00000000..8dc91715
--- /dev/null
+++ b/pages/component/swiper/swiper-list-view.uvue
@@ -0,0 +1,69 @@
+<template>
+  <view style="flex: 1;">
+    <view class="content-item">
+      <text class="text">左右滑动页面，体验swiper嵌套list-view效果。</text>
+    </view>
+    <swiper style="flex: 1;" :current="currentVal" @change="swiperChange">
+      <swiper-item v-for="index in 3">
+        <list-view :id="'list'+index" style="flex: 1;" refresher-enabled="true" @refresherrefresh="onRefresherrefresh"
+        :refresher-triggered="refresherTriggeredArray[index-1]" :scroll-top="scrollTop">
+          <sticky-header>
+            <text class="header">上下滑动体验吸顶效果 swiper-item{{index}}</text>
+          </sticky-header>
+          <list-item v-for="itemIndex in 40" class="item">
+            <text>item----------{{itemIndex}}</text>
+          </list-item>
+        </list-view>
+      </swiper-item>
+    </swiper>
+  </view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+        swiperCurrentIndex : 0,
+        currentVal: 0,
+        scrollTop: 0,
+        refresherTriggeredArray: [false, false, false] as Array<boolean>,
+			}
+		},
+		methods: {
+      swiperChange(e : SwiperChangeEvent) {
+        this.swiperCurrentIndex = e.detail.current
+      },
+      onRefresherrefresh() {
+        this.refresherTriggeredArray[this.swiperCurrentIndex] = true;
+        setTimeout(() => {
+          this.refresherTriggeredArray[this.swiperCurrentIndex] = false;
+        }, 100)
+      }
+		}
+	}
+</script>
+
+<style>
+  .item {
+    padding: 15px;
+    margin: 0 0 5px 0;
+    background-color: #fff;
+    border-radius: 5px;
+  }
+  .text {
+    font-size: 14px;
+    color: #666;
+    line-height: 20px;
+  }
+  .content-item {
+    padding: 15px;
+    margin-bottom: 10px;
+    background-color: #fff;
+  }
+  .header {
+    background-color: #ffaa00;
+    padding: 15px;
+    text-align: center;
+    color: #fff;
+  }
+</style>
diff --git a/pages/component/swiper/swiper.uvue b/pages/component/swiper/swiper.uvue
index 2e3200fb..6c63c954 100644
--- a/pages/component/swiper/swiper.uvue
+++ b/pages/component/swiper/swiper.uvue
@@ -73,7 +73,14 @@
         <view class="uni-list-cell uni-list-cell-padding">
           <view class="uni-list-cell-db">swiperChange 是否打印</view>
           <switch :checked="swiperChangeSelect" @change="swiperChangeChange" />
-        </view>
+        </view>
+
+        <navigator url="/pages/component/swiper/swiper-list-view" hover-class="none">
+          <button type="primary" class="button">
+            swiper 嵌套 list-view 测试
+          </button>
+        </navigator>
+
       </view>
     </view>
   <!-- #ifdef APP -->
-- 
GitLab