分组吸顶场景
场景描述
双列表同向联动,右边字母列表用于快速索引,内容列表根据首字母进行分组,常用于通讯录、城市选择、分组选择等页面。
本场景以城市列表页面为例,左侧城市列表数据和右侧字母导数据通过List组件来展示,并通过Stack组件使两个列表数据分层显示。在进入页面后,通过滑动左侧城市列表数据,列表字母标题吸顶展示,对应右侧字母导航内容高亮显示;点击右侧字母导航内容,左侧城市列表展示对应内容。
|---------------------------------------------------------------------------------|---------------------------------------------------------------------------------|
| 页面整体结构图 | 页面效果图 |
| |
|
实现原理
左侧List作为城市列表,右侧List为城市首字母快捷导航列表,通过ListItem对对应数据进行渲染展示,并使用Stack堆叠容器组件,字母导航列表覆盖城市列表上方,再给对应List添加sticky属性和onScrollIndex()方法,实现两个列表数据间的联动效果。
开发步骤
城市列表使用ListItemGroup,对"当前城市""热门城市""城市数据"进行分组,并通过ListItem展示每个分组中的具体数据。
// List data content.
@Builder
textContent(content: string) {
Text(content)
// ...
}
CityList.ets
List({ scroller: this.cityScroller }) {
// Current city.
ListItemGroup({ header: this.itemHead($r('app.string.current_city')) }) {
ListItem() {
Text(this.currentCity)
.width('100%')
.height(45)
.fontSize(16)
.padding({ left: 16, top: 12, bottom: 12 })
.textAlign(TextAlign.Start)
.backgroundColor(Color.White)
}
}
// Popular cities.
ListItemGroup({ header: this.itemHead($r('app.string.popular_cities')) }) {
ForEach(this.hotCities, (item: string) => {
ListItem() {
this.textContent(item);
}
}, (item: string) => item)
}
.divider({
strokeWidth: 1,
color: '#EDEDED',
startMargin: 10,
endMargin: 45
})
// City data.
ForEach(this.groupWorldList, (item: string) => {
// Traverse the first letter of the city and use it as the header of the city grouping data.
ListItemGroup({ header: this.itemHead(item) }) {
// Retrieve and display corresponding city data based on letters.
ForEach(this.getCitiesWithGroupName(item), (cityItem: City) => {
ListItem() {
this.textContent(cityItem.city);
}
}, (cityItem: City) => cityItem.city)
}
})
}
CityList.ets
右侧字母导航列表数据,同样通过List组件进行展示。
// Side letter navigation data.
Column() {
List({ scroller: this.navListScroller }) {
ForEach(this.groupWorldList, (item: string, index: number) => {
ListItem() {
Text(item)
// ...
}
}, (item: string) => item)
}
}
CityList.ets
使用堆叠容器组件Stack,将字母导航内容覆盖到城市列表内容上方。
Stack({ alignContent: Alignment.End }) {
// City List Data.
List({ scroller: this.cityScroller }) {
// ...
}
// ...
// Side letter navigation data.
Column() {
List({ scroller: this.navListScroller }) {
// ...
}
}
// ...
}
CityList.ets
最后,给城市列表添加sticky属性实现标题吸顶效果,及添加onScrollIndex()方法,通过selectNavIndex变量与字母导航列表内容进行关联,控制的对应字母导航内容的选中状态。
在字母导航列表中,添加点击事件,在点击事件中通过城市列表控制器cityScroller的scrollToIndex()事件,控制城市列表内容的改变,实现二者数据的联动效果。
Stack({ alignContent: Alignment.End }) {
// City List Data.
List({ scroller: this.cityScroller }) {
// ...
}
// ...
.onScrollIndex((index: number) => {
// By linking the selectNavIndex state variable with index, control the selection status of the navigation list.
this.selectNavIndex = index - 2;
})
// Side letter navigation data.
Column() {
List({ scroller: this.navListScroller }) {
ForEach(this.groupWorldList, (item: string, index: number) => {
ListItem() {
Text(item)
// ...
.onClick(() => {
this.selectNavIndex = index;
// Select the navigation list and set isClickScroll to true to prevent changes in the navigation list status during the scrolling process with the city list.
this.isClickScroll = true;
// By using the scrollIndex method of cityScanner, control the sliding city list to specify the Index,
// as there are "current city" and "popular city" in the city list, so the index needs to be incremented by 2.
this.cityScroller.scrollToIndex(index + 2, false, ScrollAlign.START);
})
}
}, (item: string) => item)
}
}
// ...
}
CityList.ets
实现效果

本文主要引用整理于鸿蒙官方文档