问题原因:ListItem 被 Tabs 挡住了
解决方案一:
在列表结尾处多渲染一个空的 ListItem
解决方案二:使用 contentEndOffset API 实现列表结尾偏移
@ComponentV2
export struct PageList002 {
@Local arr: number[] = []
aboutToAppear() {
for (let i = 0; i < 30; i++) {
this.arr.push(i)
}
}
@Local selectedIndex: number = 0
private controller: TabsController = new TabsController()
private listScroller: ListScroller = new ListScroller()
@Styles
listCard() {
.backgroundColor(Color.White)
.height(72)
.width("100%")
.borderRadius(12)
}
//Tabs的简单使用可以查看之前的文章,案例演示
tabs: string[] = ['生活服务', '办公必备', '出行出差'];
@Builder
tabBuilder(index: number, name: string) {
Column() {
Text(name)
.fontColor(this.selectedIndex === index ? '#007DFF' : '#182431')
.fontSize(16)
.fontWeight(this.selectedIndex === index ? 500 : 400)
.lineHeight(22)
.margin({ top: 17, bottom: 7 })
Divider()
.strokeWidth(2)
.width(20)
.margin({bottom:15})
.color('#007DFF')
.opacity(this.selectedIndex === index ? 1 : 0)
}.width(81)
}
build() {
Scroll() {
Column() {
Text("Scroll Area")
.width("100%")
.height("40%")
.backgroundColor('#0080DC')
.textAlign(TextAlign.Center)
Column() {
Tabs({ index :this.selectedIndex,barPosition: BarPosition.Start, controller: this.controller }) {
ForEach(this.tabs, (item: string, index: number) => {
TabContent() {
}.tabBar(this.tabBuilder(index, item))
})
}
.animationMode(AnimationMode.NO_ANIMATION)
.animationDuration(0)
.height('auto')
.onChange((index: number) => {
// currentIndex控制TabContent显示页签
if (index==0) {
this.listScroller.scrollToIndex(0)
}else if (index==1){
this.listScroller.scrollToIndex(10)
}else {
this.listScroller.scrollToIndex(20)
}
})
List({ space: 10 ,scroller:this.listScroller}) {
ForEach(this.arr, (item: number) => {
ListItem() {
Text("item" + item)
.fontSize(16)
}.listCard()
}, (item: string) => item)
}.width("100%")
.edgeEffect(EdgeEffect.Spring)
.nestedScroll({
scrollForward: NestedScrollMode.PARENT_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST
})
.onScrollIndex((start: number, end: number, center: number) => {
// if (start<10) {
// this.selectedIndex=0;
// }else if (start>=10&&start<20){
// this.selectedIndex=1;
// }else if (start>=20){
// this.selectedIndex=2;
// }
//如果条目比较少很容易划回去
if (center<10 && this.selectedIndex != 0) {
this.selectedIndex=0;
}else if (center>=10&¢er<20 && this.selectedIndex != 1){
this.selectedIndex=1;
}else if (center>=20 && this.selectedIndex != 2){
this.selectedIndex=2;
}
})
}.height('100%')
Blank().height(52)
}.width("100%")
}
.edgeEffect(EdgeEffect.None)
.friction(0.6)
.backgroundColor('#DCDCDC')
.scrollBar(BarState.Off)
.width('100%')
.height('100%')
}
}