HarmonyOS 鸿蒙Next ListItemGroup会影响到onScrollIndex事件的监听嘛?
HarmonyOS 鸿蒙Next ListItemGroup会影响到onScrollIndex事件的监听嘛?
有问题的代码如下,使用ListItemGroup就监听不到onScrollIndex事件中起始位置和终止位置的变化,上滑的时候,顶部的0-0一直没变~
@Entry
@Component
struct TestPage {
private nums: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
@State startIndex: number = 0
@State endIndex: number = 0
@Builder
headerList() {
Row() {
Text('ListItemGroup的顶部')
Text(`${this.startIndex} - ${this.endIndex}`)
}.width('100%').height(70).justifyContent(FlexAlign.Center).backgroundColor(Color.Orange)
}
build() {
List() {
ListItemGroup({ header: this.headerList() }) {
ForEach(this.nums, (item: number) => {
ListItem() {
Column() {
Text(item.toString()).width('100%').height(100).textAlign(TextAlign.Center).align(Alignment.Center)
Divider().width('100%').height(1).color(Color.Black)
}
}
})
}
}
.width('100%')
.height('100%')
.sticky(StickyStyle.Header)
.onScrollIndex((start: number, end: number) => {
this.startIndex = start
this.endIndex = end
})
}
}
把ListItemGroup去掉,就可以正常监听到onScrollIndex中的变化,顶部的0-0会随着滑动而改变?这是咋回事~可以帮我看看嘛?
@Entry
@Component
struct TestPage {
private nums: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
@State startIndex: number = 0
@State endIndex: number = 0
@Builder
headerList() {
Row() {
Text('ListItemGroup的顶部')
Text(`${this.startIndex} - ${this.endIndex}`)
}.width('100%').height(70).justifyContent(FlexAlign.Center).backgroundColor(Color.Orange)
}
build() {
Column() {
Row() {
Text('ListItemGroup的顶部')
Text(`${this.startIndex} - ${this.endIndex}`)
}.width('100%').height(70).justifyContent(FlexAlign.Center).backgroundColor(Color.Orange)
List() {
ForEach(this.nums, (item: number) => {
ListItem() {
Column() {
Text(item.toString()).width('100%').height(100).textAlign(TextAlign.Center).align(Alignment.Center)
Divider().width('100%').height(1).color(Color.Black)
}
}
})
}
.width('100%')
.height('100%')
.sticky(StickyStyle.Header)
.onScrollIndex((start: number, end: number) => {
this.startIndex = start
this.endIndex = end
})
}
}
}
更多关于HarmonyOS 鸿蒙Next ListItemGroup会影响到onScrollIndex事件的监听嘛?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
import { hilog } from '[@kit](/user/kit).PerformanceAnalysisKit'
[@Entry](/user/Entry)
[@Component](/user/Component)
struct TestPage {
private nums: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
[@State](/user/State) startIndex: number = 0
[@State](/user/State) endIndex: number = 0
[@Builder](/user/Builder)
headerList() {
Row() {
Text('ListItemGroup的顶部')
Text(`${this.startIndex} - ${this.endIndex}`)
}.width('100%').height(70).justifyContent(FlexAlign.Center).backgroundColor(Color.Orange)
}
build() {
Column() {
Row() {
Text('ListItemGroup的顶部')
Text(`${this.startIndex} - ${this.endIndex}`)
}.width('100%').height(70).justifyContent(FlexAlign.Center).backgroundColor(Color.Orange)
List() {
ForEach(this.nums, (item: number) => {
ListItem() {
Column() {
Text(item.toString()).width('100%').height(100).textAlign(TextAlign.Center).align(Alignment.Center)
Divider().width('100%').height(1).color(Color.Black)
}
}
})
}
.width('100%')
.height('100%')
.sticky(StickyStyle.Header)
.onScrollVisibleContentChange((start, end) => {
hilog.debug(0x000000, 'rainrain', 'start == ' + start.index + ' end == ' + end.index)
this.startIndex = start.index
this.endIndex = end.index
})
}
}
}
更多关于HarmonyOS 鸿蒙Next ListItemGroup会影响到onScrollIndex事件的监听嘛?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
api 12 以上 onScrollVisibleContentChange 。里面数据比scroll的准确
才发现,这个API解决不了ListItemGroup组件当前可见的ListItem元素索引值,还得用老办法onVisibleAreaChange
.onScrollVisibleContentChange((start, end) => { this.startIndex = start.itemIndexInGroup as number this.endIndex = end.itemIndexInGroup as number }) 这个不行吗?
ListItemGroup没有类似onScrollIndex的API,拿不到当前的ListItemGroup子组件ListItem的索引值。
可以使用API onVisibleAreaChange来监听ListeItem的变化。当ListeItem被滚动到可见区域,触发onVisibleAreaChange回调,拿到当前ListeItem索引值。
关于该问题已在常见问题手册中归类,可查看链接(如1楼描述):https://developer.huawei.com/consumer/cn/doc/architecture-guides/develop-arkui-63-0000002130558377
核心代码如下
ListItemGroup({ header: this.ListGroupHead(itemGroup.title) }) {
ForEach(itemGroup.contacts, (item: Contact, index: number) => {
ListItem() {
Text(item.name)
}
// ListItemGroup的可见区域发生变化时,触发API,并且可以拿到对应的item,List组件的索引值等诸多参数。
// [0, 1],阈值数组。其中,每个阈值代表组件可见面积。可见区域变成0%和100%的时候,会触发,再根据isVisible,就可以判断当前是0%还是100%
.onVisibleAreaChange([0, 1], (isVisible: boolean, currRatio: number) => {
// isVisible:表示组件的可见面积与自身面积的比值与上一次变化相比的情况,比值变大为true,比值变小为false
if (isVisible) {
hilog.info(null, 'onVisibleAreaChange: isVisible' + currRatio + item.name + index, null)
} else {
hilog.info(null, 'onVisibleAreaChange: unVisible' + currRatio + item.name + index, null)
}
})
})
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>
这个答案老了,看楼下新的api
谢谢!!!!!!
可以解决,谢谢老哥
使用onScrollVisibleContentChange来实现~~
[@Entry](/user/Entry)
[@Component](/user/Component)
struct TestPage {
private nums: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
[@State](/user/State) startIndex: number = 0
[@State](/user/State) endIndex: number = 0
@Builder
headerList() {
Row() {
Text(‘ListItemGroup的顶部’)
Text(${<span class="hljs-keyword">this</span>.startIndex} - ${<span class="hljs-keyword">this</span>.endIndex}
)
}.width(‘100%’).height(70).justifyContent(FlexAlign.Center).backgroundColor(Color.Orange)
}
build() {
List() {
ListItemGroup({ header: this.headerList() }) {
ForEach(this.nums, (item: number) => {
ListItem() {
Column() {
Text(item.toString()).width(‘100%’).height(100).textAlign(TextAlign.Center).align(Alignment.Center)
Divider().width(‘100%’).height(1).color(Color.Black)
}
}
})
}
}
.width(‘100%’)
.height(‘100%’)
.sticky(StickyStyle.Header)
.onScrollVisibleContentChange((start, end) => {
this.startIndex = start.itemIndexInGroup as number
this.endIndex = end.itemIndexInGroup as number
})
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>
[@Entry](/user/Entry)
[@Component](/user/Component)
struct TestPage {
private nums: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
[@State](/user/State) startIndex: number = 0
[@State](/user/State) endIndex: number = 0
@Builder
headerList() {
Row() {
Text(‘ListItemGroup的顶部’)
Text(${<span class="hljs-keyword">this</span>.startIndex} - ${<span class="hljs-keyword">this</span>.endIndex}
)
}.width(‘100%’).height(70).justifyContent(FlexAlign.Center).backgroundColor(Color.Orange)
}
build() {
List() {
ListItemGroup({ header: this.headerList() }) {
ForEach(this.nums, (item: number, index: number) => {
ListItem() {
Column() {
Text(item.toString()).width(‘100%’).height(100).textAlign(TextAlign.Center).align(Alignment.Center)
Divider().width(‘100%’).height(1).color(Color.Black)
}
}
.onVisibleAreaChange([<span class="hljs-number">0</span>, <span class="hljs-number">1</span>], (isVisible: boolean, currRatio: number) => {
<span class="hljs-comment">// isVisible:表示组件的可见面积与自身面积的比值与上一次变化相比的情况,比值变大为true,比值变小为false</span>
<span class="hljs-comment">// TODO 这里的index就是当前页面展示的列表的起始和终止,不是很科学,但是可以用</span>
<span class="hljs-keyword">if</span> (isVisible) {
console.info(<span class="hljs-literal">null</span>, <span class="hljs-string">'onVisibleAreaChange: isVisible'</span> + currRatio + <span class="hljs-string">'--------'</span> + item.toString() + <span class="hljs-string">'--------'</span> + index, <span class="hljs-literal">null</span>)
} <span class="hljs-keyword">else</span> {
console.info(<span class="hljs-literal">null</span>, <span class="hljs-string">'onVisibleAreaChange: unVisible'</span> + currRatio + item.toString() + index, <span class="hljs-literal">null</span>)
}
})
})
}
}
.width(<span class="hljs-string">'100%'</span>)
.height(<span class="hljs-string">'100%'</span>)
.sticky(StickyStyle.Header)
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>
HarmonyOS 鸿蒙Next ListItemGroup不会直接影响到onScrollIndex事件的监听。
在HarmonyOS中,ListItemGroup是用于组织和管理列表项的一个组件,它主要用于分组显示列表数据,提高UI的层次感和可读性。而onScrollIndex事件则是用于监听列表滚动过程中当前可见项的索引变化。
从机制上看,ListItemGroup的添加或修改并不会改变列表滚动的基本逻辑,也不会打断onScrollIndex事件的正常监听。也就是说,只要列表的滚动行为发生,且该行为符合触发onScrollIndex事件的条件,那么无论是否存在ListItemGroup,onScrollIndex事件都会被正常触发。
当然,如果在实现过程中,对ListItemGroup进行了特殊处理,如自定义了滚动逻辑或修改了列表项的显示方式,这些操作可能会间接影响到onScrollIndex事件的监听。但这种情况并非由ListItemGroup本身导致,而是由开发者的实现方式决定的。
因此,在一般情况下,HarmonyOS 鸿蒙的Next ListItemGroup不会影响到onScrollIndex事件的监听。如果在实际开发中遇到相关问题,建议检查滚动逻辑和事件监听的实现方式,确保它们符合HarmonyOS的组件规范。
如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html