nested-scroll-body

组件类型：UniNestedScrollHeaderElement

scroll-view 嵌套模式场景中属于嵌套内层 scroll-view 的父节点，仅支持作为 <scroll-view type='nested'> 嵌套模式的直接子节点。不支持复数子节点，渲染时会取其第一个子节点来渲染

nested-scroll-body 兼容性

Android	iOS	web
4.11	4.11	x

使用场景

scroll-view 嵌套场景中。内层 scroll-view 滚动时无法与外层 scroll-view 滚动衔接，无法实现嵌套滚动连贯效果。因此提供nested-scroll-body节点，存放内层 scroll-view 节点。nested-scroll-body会与外层nested-scroll-header衔接滚动逻辑实现连贯滚动。开发者只需将内层滚动节点放置nested-scroll-body节点内即可。具体用法请参考scroll-view嵌套模式

注意

• nested-scroll-body 组件不支持css, 排版需求要交给子节点实现
• nested-scroll-body 组件不支持复数子节点，渲染时会取其第一个子节点来渲染
• nested-scroll-body 组件只能渲染在 nested-scroll-header组件下面
• 外层 scroll-view 的子节点中只能有一个 nested-scroll-body

示例

hello uni-app x

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

参见

• 相关 Bug