简体中文
简体中文
# nested-scroll-header
组件类型：UniNestedScrollHeaderElement
scroll-view 嵌套模式场景中属于外层 scroll-view 的节点，仅支持作为
# 兼容性
| Web | 微信小程序 | Android | iOS | HarmonyOS | HarmonyOS(Vapor) |
|---|---|---|---|---|---|
| x | x | 4.11 | 4.11 | 4.61 | - |
# 使用场景
scroll-view 嵌套场景中。外层 scroll-view 滚动时无法与内层 scroll-view 滚动衔接连贯滚动，因此提供nested-scroll-header节点，存放除内层 scroll-view 以外的内容节点。nested-scroll-body内部 scroll-view 滚动时会检测nested-scroll-header节点滚动位置，约束内层 scroll-view 滚动逻辑，实现嵌套模式下衔接连贯滚动。开发者只需将外层要显示内容节点放置nested-scroll-header节点内即可。具体用法请参考scroll-view嵌套模式
# 注意事项
nested-scroll-header组件不支持设置css样式，不要通过 class 和 style 设置样式nested-scroll-header组件应该放在nested-scroll-body组件前面（上面）nested-scroll-header组件不支持多个子节点，渲染时只会取第一个子节点来渲染
# 子组件
支持所有组件
# 示例
示例为hello uni-app x alpha分支，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例另见
该 API 不支持 Web，请运行 hello uni-app x 到 App 平台体验
<template>
<scroll-view style="flex:1" type="nested" direction="vertical">
<nested-scroll-header>
<view class="scroll-header-tiem1">
<text>会渲染的nested-scroll-header</text>
</view>
<!-- dom2 nested-scroll-header 没有限制节点数量 临时注释 -->
<!-- <view class="scroll-header-tiem1">
<text>不会渲染nested-scroll-header，因为 nested-scroll-header 只会渲染第一个子节点</text>
</view> -->
</nested-scroll-header>
<nested-scroll-header>
<swiper ref="headerRef" indicator-dots="true" circular="true">
<swiper-item v-for="i in num" :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 setup lang="uts">
const scrollData = ref([] as Array<string>)
const num = ref(0)
const headerRef = ref<UniSwiperElement | null>(null)
onLoad(() => {
let lists : Array<string> = []
for (let i = 0; i < 30; i++) {
lists.push("item---" + i)
}
scrollData.value = lists
})
onReady(() => {
num.value = 3
})
</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>
