鸿蒙实战：HarmonyOS NEXT【城市选择】

城市选择案例

介绍

本示例介绍城市选择场景的使用：通过[AlphabetIndexer]实现首字母快速定位城市的索引条导航。

效果图预览

使用说明

分两个功能

• 在搜索框中可以根据城市拼音模糊搜索出相近的城市，例如输入"a"，会出现"阿尔山"、“阿勒泰地区”、“安庆”、“安阳”。
• 下方城市列表通过AlphabetIndexer组件实现拼音索引条，通过滑动选择城市首拼，快速定位相关首拼城市。

实现思路

场景：通过AlphabetIndexer实现索引条导航

城市列表中的右侧首拼索引条，通过AlphabetIndexer组件实现首字母快速定位城市的索引条导航。

• 通过AlphabetIndexer的selected属性与城市列表中List组件onScrollIndex事件绑定

AlphabetIndexer({ arrayValue: TAB_VALUE, selected: this.stabIndex })
  .height('100%')
  .selectedColor($r('app.color.alphabet_select_color')) // 选中项文本颜色
  .popupColor($r('app.color.alphabet_pop_color')) // 弹出框