HarmonyOS 鸿蒙Next 使用 scroll 嵌套 tab 时，页面向上滑动时，tab 吸顶问题
HarmonyOS 鸿蒙Next 使用 scroll 嵌套 tab 时，页面向上滑动时，tab 吸顶问题
1、使用 scroll 嵌套 tab 时，页面向上滑动时，tab 吸顶问题
2、当 tab 为一条数据时，希望 tab 从左往右排列
2 回复
scroll 嵌套 tab 时，页面向上滑动时，tab 吸顶问题参考
enum ScrollPosition {
start,
center,
end
}
@Entry
@Component
struct NestedScroll {
@State listPosition: number = ScrollPosition.start; // 0代表滚动到List顶部，1代表中间值，2代表滚动到List底部。
@State scrollPosition: number = ScrollPosition.start; // 0代表滚动到页面顶部，1代表中间值，2代表滚动到页面底部。
@State showTitle: boolean = false;
@State currentYOffset: number = 0;
private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
private scrollerForScroll: Scroller = new Scroller();
private scrollerForList: Scroller = new Scroller();
controller: TextInputController = new TextInputController()
build() {
Stack({ alignContent: Alignment.Top }) {
Scroll(this.scrollerForScroll) {
Column() {
// Image($r('app.media.startIcon'))
// .width("100%")
// .height("40%")
Column(){
}
.width("100%")
.height("40%")
.backgroundColor(Color.Pink)
Tabs({ barPosition: BarPosition.Start }) {
TabContent() {
List({ space: 10, scroller: this.scrollerForList }) {
ForEach(this.arr, (item: number) => {
ListItem() {
Text("促销商品" + item)
.width("100%")
.height("100%")
.borderRadius(15)
.fontSize(24)
.textAlign(TextAlign.Center)
.backgroundColor(Color.White)
}.width("100%").height(100)
}, (item: string) => item)
}
.padding({ left: 10, right: 10 })
.width("100%")
.edgeEffect(EdgeEffect.None)
.scrollBar(BarState.Off)
.onReachStart(() => {
this.listPosition = ScrollPosition.start
})
.onReachEnd(() => {
this.listPosition = ScrollPosition.end
})
.onScrollFrameBegin((offset: number, state: ScrollState) => {
// 滑动到列表中间时
if (!((this.listPosition == ScrollPosition.start && offset < 0)
|| (this.listPosition == ScrollPosition.end && offset > 0))) {
this.listPosition = ScrollPosition.center
}
// 如果页面已滚动到底部，列表不在顶部或列表有正向偏移量
if (this.scrollPosition == ScrollPosition.end
&& (this.listPosition != ScrollPosition.start || offset > 0)) {
return { offsetRemain: offset };
} else {
this.scrollerForScroll.scrollBy(0, offset)
return { offsetRemain: 0 };
}
})
}.tabBar('促销活动')
TabContent() {
List({ space: 10, scroller: this.scrollerForList }) {
ForEach(this.arr, (item: number) => {
ListItem() {
Text("行程安排" + item)
.width("100%")
.height("100%")
.borderRadius(15)
.fontSize(24)
.textAlign(TextAlign.Center)
.backgroundColor(Color.White)
}.width("100%").height(100)
}, (item: string) => item)
}
.padding({ left: 10, right: 10 })
.width("100%")
.edgeEffect(EdgeEffect.None)
.scrollBar(BarState.Off)
.onReachStart(() => {
this.listPosition = ScrollPosition.start
})
.onReachEnd(() => {
this.listPosition = ScrollPosition.end
})
.onScrollFrameBegin((offset: number, state: ScrollState) => {
// 滑动到列表中间时
if (!((this.listPosition == ScrollPosition.start && offset < 0)
|| (this.listPosition == ScrollPosition.end && offset > 0))) {
this.listPosition = ScrollPosition.center
}
// 如果页面已滚动到底部，列表不在顶部或列表有正向偏移量
if (this.scrollPosition == ScrollPosition.end
&& (this.listPosition != ScrollPosition.start || offset > 0)) {
return { offsetRemain: offset };
} else {
this.scrollerForScroll.scrollBy(0, offset)
return { offsetRemain: 0 };
}
})
}.tabBar('行程服务')
}
.vertical(false)
.barMode(BarMode.Fixed)
.barWidth(360)
.barHeight(56)
.width("100%")
.height("92%")
.backgroundColor('#F1F3F5')
}
}
.scrollBar(BarState.Off)
.width("100%")
.height("100%")
.onScroll((xOffset: number, yOffset: number) => {
this.currentYOffset = this.scrollerForScroll.currentOffset().yOffset;
// 非（页面在顶部或页面在底部），则页面在中间
if (!((this.scrollPosition == ScrollPosition.start && yOffset < 0)
|| (this.scrollPosition == ScrollPosition.end && yOffset > 0))) {
this.scrollPosition = ScrollPosition.center
}
})
.onScrollEdge((side: Edge) => {
if (side == Edge.Top) {
// 页面在顶部
this.scrollPosition = ScrollPosition.start
} else if (side == Edge.Bottom) {
// 页面在底部
this.scrollPosition = ScrollPosition.end
}
})
.onScrollFrameBegin(offset => {
if (this.scrollPosition == ScrollPosition.end) {
return { offsetRemain: 0 };
} else {
return { offsetRemain: offset };
}
})
if (this.currentYOffset+50 >= 0) {
Row() {
TextInput({ text: 'xxxxxxxx', placeholder: 'input your word...', controller: this.controller }).fontSize(24)
}
.justifyContent(FlexAlign.Center)
.backgroundColor('#00ffffff')
.width('100%')
.height('8%')
// .opacity(this.currentYOffset / 50 > 1 ? 1 : this.currentYOffset / 50)
}
}
.width('100%')
.height('100%')
.backgroundColor(0xDCDCDC)
}
}
更多关于HarmonyOS 鸿蒙Next 使用 scroll 嵌套 tab 时，页面向上滑动时，tab 吸顶问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
针对HarmonyOS 鸿蒙Next中使用scroll嵌套tab时，页面向上滑动时tab吸顶的问题，以下是专业解答：
在HarmonyOS鸿蒙Next中，要实现scroll嵌套tab时的tab吸顶效果，可遵循以下步骤：
- 布局构建：利用Stack组件结合Scroll组件，构建一个可以滚动的页面布局。在Stack中，将Tab组件放置在Scroll组件的上方，并设置其position属性为相对定位或根据需要调整为固定定位。
- 滚动监听：通过Scroll组件的滚动事件回调函数onScroll监听滚动位置。当滚动到一定位置（如头部导航下方）时，动态调整Tab组件的position属性或使用动态布局，使其固定在导航栏下方。
- 高度调整：考虑到状态栏和导航栏的高度，避免Tab组件被遮挡。可通过系统API获取这些高度值，并在计算吸顶位置时做相应调整。
- nestedScroll属性：为Scroll组件设置nestedScroll属性，处理嵌套滑动逻辑，确保滑至Tab组件时实现吸顶效果，同时List子组件内容可继续滑动。
如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。
