新增swiper嵌套list-view示例

pages.json

@@ -1277,6 +1277,14 @@
         "navigationBarTitleText" : "自定义虚拟长列表",
         "enablePullDownRefresh" : false
       }
+    },
+    {
+      "path" : "pages/component/swiper/swiper-list-view",
+      "style" :
+      {
+        "navigationBarTitleText" : "swiper嵌套list-view",
+        "enablePullDownRefresh" : false
+      }
     }
     // #endif
   ],

pages/component/swiper/swiper-list-view.test.js

+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();
+  })
+
+})

pages/component/swiper/swiper-list-view.uvue

+<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>

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 -->