新增nested-scroll-body、nested-scroll-header组件示例

pages.json

@@ -1206,6 +1206,18 @@
         "enablePullDownRefresh": false
       }
     },
+    {
+      "path": "pages/component/nested-scroll-header/nested-scroll-header",
+      "style": {
+        "navigationBarTitleText": "nested-scroll-header"
+      }
+    },
+    {
+      "path": "pages/component/nested-scroll-body/nested-scroll-body",
+      "style": {
+        "navigationBarTitleText": "nested-scroll-body"
+      }
+    },
     // #endif
     // #ifdef APP || WEB
     {

pages/component/nested-scroll-body/nested-scroll-body.test.js

+describe('component-native-nested-scroll-body', () => {
+  let page
+  beforeAll(async () => {
+    //打开lnested-scroll-body测试页
+    page = await program.reLaunch('/pages/component/nested-scroll-body/nested-scroll-body')
+    await page.waitFor(600)
+  })
+
+  //检测横向scroll_into_view属性赋值
+  it('check_scroll_into_view_left', async () => {
+    await page.callMethod('testBodyScrollBy', 400)
+    await page.waitFor(300)
+    const image = await program.screenshot();
+    expect(image).toMatchImageSnapshot();
+  })
+})

pages/component/nested-scroll-body/nested-scroll-body.uvue

+<template>
+	<scroll-view style="flex:1" type="nested" direction="vertical" refresher-enabled="true" refresher-default-style="none"
+      bounces="false" :refresher-triggered="refresherTriggered" @refresherpulling="onRefresherpulling" @refresherrefresh="onRefresherrefresh" @refresherrestore="onRefreshrestore">
+    <nested-scroll-header>
+      <swiper ref="header" indicator-dots="true" circular="true">
+        <swiper-item  v-for="i in 3" :item-id="i">
+          <image src="/static/shuijiao.jpg" style="width:100% ;height: 240px;"></image>
+        </swiper-item>
+      </swiper>
+    </nested-scroll-header>
+    <nested-scroll-body>
+      <view style="flex:1">
+        <view style="flex-direction: row;">
+          <text style="padding: 12px 15px;">nested-scroll-body</text>
+        </view>
+        <!-- 嵌套滚动仅可能关闭bounces效果 会影响嵌套滚动不连贯 -->
+        <list-view bounces="false" id="body-list" :scroll-top="scrollTop" style="flex:1" associative-container="nested-scroll-view">
+          <list-item v-for="key in scrollData">
+          	<view class="scroll-item">
+          		<text class="scroll-item-title">{{key}}</text>
+          	</view>
+          </list-item>
+        </list-view>
+      </view>
+      <text>不会渲染，因为 nested-scroll-body 只会渲染第一个子节点</text>
+    </nested-scroll-body>
+    <!-- 支持自定义样式下拉刷新slot组件 -->
+    <refresh-box slot="refresher" :state="state"></refresh-box>
+	</scroll-view>
+</template>
+
+<script>
+  import refreshBox from '../../template/custom-refresher/refresh-box/refresh-box.uvue';
+	export default {
+    components: { refreshBox },
+		data() {
+			return {
+          scrollData: [] as Array<string>,
+          scrollTop: 0,
+          refresherTriggered: false,
+          pullingDistance: 0,
+          resetting: false
+			}
+		},
+    computed: {
+    	state() : number {
+    		if (this.resetting) {
+    			return 3;
+    		}
+    		if (this.refresherTriggered) {
+    			return 2
+    		}
+    		if (this.pullingDistance > 45) {
+    			return 1
+    		} else {
+    			return 0;
+    		}
+    	}
+    },
+    onLoad() {
+    	let lists : Array<string> = []
+    	for (let i = 0; i < 30; i++) {
+    		lists.push("item---" + i)
+    	}
+    	this.scrollData = lists
+    },
+		methods: {
+      onRefresherpulling(e : RefresherEvent) {
+      	this.pullingDistance = e.detail.dy;
+      },
+      onRefresherrefresh() {
+      	this.refresherTriggered = true
+      	setTimeout(() => {
+      		this.refresherTriggered = false
+      		this.resetting = true;
+      	}, 1500)
+      },
+      onRefreshrestore() {
+        this.pullingDistance = 0
+      	this.resetting = false;
+      },
+      //自动化测试使用
+      testBodyScrollBy(y: number) {
+        this.scrollTop = y
+      }
+		}
+	}
+</script>
+
+<style>
+	.scroll-item {
+		margin-left: 6px;
+		margin-right: 6px;
+		margin-top: 6px;
+		background-color: #fff;
+		border-radius: 4px;
+	}
+
+	.scroll-item-title {
+		width: 100%;
+		height: 60px;
+		line-height: 60px;
+		text-align: center;
+		color: #555;
+	}
+
+  .scroll-header-tiem {
+    height: 200px;
+    background-color: #66ccff;
+    align-items: center;
+    justify-content: center;
+  }
+</style>

pages/component/nested-scroll-header/nested-scroll-header.test.js

+describe('component-native-nested-scroll-header', () => {
+  let page
+  beforeAll(async () => {
+    //打开lnested-scroll-header测试页
+    page = await program.reLaunch('/pages/component/nested-scroll-header/nested-scroll-header')
+    await page.waitFor(600)
+  })
+
+
+  it('check_nested-scroll-header', async () => {
+    const image = await program.screenshot();
+    expect(image).toMatchImageSnapshot();
+  })
+})
+

pages/component/nested-scroll-header/nested-scroll-header.uvue

+<template>
+	<scroll-view style="flex:1" type="nested" direction="vertical">
+    <nested-scroll-header>
+      <view class="scroll-header-tiem1">
+        <text>会渲染的nested-scroll-header</text>
+      </view>
+      <view class="scroll-header-tiem1">
+        <text>不会渲染nested-scroll-header，因为 nested-scroll-header 只会渲染第一个子节点</text>
+      </view>
+    </nested-scroll-header>
+    <nested-scroll-header>
+      <swiper ref="header" indicator-dots="true" circular="true">
+        <swiper-item  v-for="i in 3" :item-id="i">
+          <view class="scroll-header-tiem2">
+            <text>如果存在多个头部节点，那么就使用多个 nested-scroll-header 来将其包裹</text>
+          </view>
+        </swiper-item>
+      </swiper>
+    </nested-scroll-header>
+    <nested-scroll-body>
+      <scroll-view style="flex:1" associative-container="nested-scroll-view">
+        <view v-for="key in scrollData">
+        	<view class="scroll-item">
+        		<text class="scroll-item-title">{{key}}</text>
+        	</view>
+        </view>
+      </scroll-view>
+    </nested-scroll-body>
+	</scroll-view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+          scrollData: [] as Array<string>,
+			}
+		},
+    onLoad() {
+    	let lists : Array<string> = []
+    	for (let i = 0; i < 30; i++) {
+    		lists.push("item---" + i)
+    	}
+    	this.scrollData = lists
+    },
+		methods: {
+		}
+	}
+</script>
+
+<style>
+	.scroll-item {
+		margin-left: 6px;
+		margin-right: 6px;
+		margin-top: 6px;
+		background-color: #fff;
+		border-radius: 4px;
+	}
+
+	.scroll-item-title {
+		width: 100%;
+		height: 60px;
+		line-height: 60px;
+		text-align: center;
+		color: #555;
+	}
+
+  .scroll-header-tiem1 {
+    height: 200px;
+    background-color: #66ccff;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .scroll-header-tiem2 {
+    height: 100px;
+    background-color: #89ff8d;
+    align-items: center;
+    justify-content: center;
+  }
+
+</style>

pages/tabBar/component.uvue

@@ -86,6 +86,12 @@
               {
                 name: 'sticky-section',
               },
+              {
+                name: 'nested-scroll-header',
+              },
+              {
+                name: 'nested-scroll-body',
+              },
             ] as Page[],
           },
           {