鸿蒙城市选择及点击字母跳转到对应的文字List+ AlphabetIndexer

代码实现

1.List列表（配合ListItemGroup使用）item上方会有字母显示

 List({ space: 20, initialIndex: 0,scroller: this.listScroller  }) {
            ForEach(city.data, (letter: groupType) => {
              ListItemGroup({ header: this.itemHead(letter.title)}) {
                ForEach(letter.value, (item:cityType) => {
                    ListItem() {
                      Text(item.name).fontSize(16)
                    }
                    .padding({left:10})
                    .height(50)
                  }, (item: cityType) => JSON.stringify(item))
              }
              .divider({ strokeWidth: 0.5, color: '#e0e0e0' })
            })
          }
          .sticky(StickyStyle.Header) // ListItemGroup吸顶
          .scrollBar(BarState.Off)
          .onScrollIndex((firstIndex: number) => {
            // 根据列表滚动到的索引值，重新计算对应联系人索引栏的位置this.selectedIndex
              this.selectedIndex = firstIndex

          })

2.字母列表

 // 字母表索引组件
          AlphabetIndexer({ arrayValue: alphabets,  selected: $$this.selectedIndex})
            .height('100%')
            .itemSize(25) // 每一项的尺寸大小
            .onSelect((index: number) => {
              this.listScroller.scrollToIndex(index)
            })

3.完整代码

city.json代码在上一篇文章（二级城市）

https://blog.csdn.net/m0_60880588/article/details/140956560?spm=1001.2014.3001.5501

import { titleBar } from '@ohos/common'
import city from '../../resources/rawfile/city.json'
interface cityType{
  id:number
  name:string
}
interface  groupType{
  title:string
  value:Array<cityType>
}
@Builder
export function CityBuilder() {
  CityPage()
}
const alphabets = [ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K',
  'L', 'M', 'N',  'P', 'Q', 'R', 'S', 'T',  'W', 'X', 'Y', 'Z'];

@Component
struct CityPage {
  @State selectedIndex: number = 0;
  private listScroller: Scroller = new Scroller();
  @Builder
  itemHead(text: string) {
    Text(text)
      .fontSize(20)
      .backgroundColor(0xAABBCC)
      .width("100%")
      .padding(10)
  }
  build() {
    NavDestination(){
      titleBar({
        titleText:'城市选择',
        isBack:true
      })
      Column(){
        Stack({ alignContent: Alignment.End }) {
          List({ space: 20, initialIndex: 0,scroller: this.listScroller  }) {
            ForEach(city.data, (letter: groupType) => {
              ListItemGroup({ header: this.itemHead(letter.title)}) {
                ForEach(letter.value, (item:cityType) => {
                    ListItem() {
                      Text(item.name).fontSize(16)
                    }
                    .padding({left:10})
                    .height(50)
                  }, (item: cityType) => JSON.stringify(item))
              }
              .divider({ strokeWidth: 0.5, color: '#e0e0e0' })
            })
          }
          .sticky(StickyStyle.Header) // ListItemGroup吸顶
          .scrollBar(BarState.Off)
          .onScrollIndex((firstIndex: number) => {
            // 根据列表滚动到的索引值，重新计算对应联系人索引栏的位置this.selectedIndex
              this.selectedIndex = firstIndex

          })
          // 字母表索引组件
          AlphabetIndexer({ arrayValue: alphabets,  selected: $$this.selectedIndex})
            .height('100%')
            .itemSize(25) // 每一项的尺寸大小
            .onSelect((index: number) => {
              this.listScroller.scrollToIndex(index)
            })
        }.height('100%')
      }
      .backgroundColor('white')
      .height('90%')
      .padding(10)
    }
    .hideTitleBar(true)
    .backButtonIcon($r('app.media.leftIcon'))
    .backgroundColor('#F1F3F5')

  }
}