前言

最近在日常開(kāi)發(fā)過(guò)程中，需要實(shí)現(xiàn)城市選擇功能，同時(shí)支持模糊搜索。看似簡(jiǎn)單的功能動(dòng)手實(shí)現(xiàn)起來(lái)卻有很多難點(diǎn)。本篇文章詳細(xì)記錄開(kāi)發(fā)過(guò)程中遇到的問(wèn)題和對(duì)應(yīng)的解決方法，希望能夠幫助你，建議點(diǎn)贊收藏！

實(shí)現(xiàn)效果

需求分析

• 處理城市列表中的多音字。
• 城市列表要按照字母表的順序排列
• 將首字母相同的城市分組。

技術(shù)實(shí)現(xiàn)

1. 在日常開(kāi)發(fā)中，城市數(shù)據(jù)一般由接口獲取或從本地 json 文件讀取，畢竟城市數(shù)量和城市編碼是固定不變的。不管是哪種方式獲取城市數(shù)據(jù)，都無(wú)法保證數(shù)據(jù)的順序符合需求，在處理數(shù)據(jù)順序之前，首先要處理數(shù)據(jù)中的多音字，對(duì)常見(jiàn)多音字手動(dòng)添加拼音字母，其余城市直接獲取首字母，這里需要借助一個(gè)三方庫(kù)pinyin4js 獲取漢字的第一個(gè)拼音字母。

data?.forEach((city) = > {
            if (city.cityName?.includes("長(zhǎng)沙")) {
              city.letter = "CHANGSHASHI"
            } else if (city.cityName?.startsWith("重慶")) {
              city.letter = "CHONGQING"
            } else if (city.cityName?.startsWith("廈門(mén)")) {
              city.letter = "XIAMENSHI"
            } else {
              city.letter = pinyin4js.convertToPinyinString(city.cityName, '', pinyin4js.FIRST_LETTER).toUpperCase()
            }

          })

2. 得到城市的字母后，這時(shí)就需要對(duì)城市數(shù)據(jù)按字母排序進(jìn)行處理，借助系統(tǒng)通過(guò)collator 類的 compare 方法，對(duì)數(shù)據(jù)的字母進(jìn)行排序。

let collator = new intl.Collator();
        data.sort((firstCity: HotCityBean, secondCity: HotCityBean) = > {
          return collator.compare(firstCity.letter, secondCity.letter)
        })

3. 得到排序后的數(shù)據(jù)，需要對(duì)數(shù)據(jù)進(jìn)行分組，將首字母相同的城市放在同一個(gè)數(shù)組里，這一步有點(diǎn)復(fù)雜，需要慢慢看。

let target = data[0].letter?.charAt(0) ?? ""
        let cityType = new HotCityTypeBean()
        cityType.name = target;
        data.forEach((value, number) = > {
          if (value.letter?.charAt(0) != target) {
            this.cityList.push(cityType)
            target = value.letter?.charAt(0) ?? ""
            cityType = new HotCityTypeBean()
            cityType.name = target
            cityType.city.push(value)
          } else {
            cityType.city.push(value)
          }
      
          .......
        })

**首先得到第一條城市的首字母 A 作為目標(biāo)項(xiàng)，然后使用 forEach 遍歷數(shù)據(jù)，如果遍歷的對(duì)象的首字母和目標(biāo)項(xiàng) A 不相等，則先認(rèn)為首字母 A 的城市遍歷結(jié)束，直接將相同字母 A 的數(shù)據(jù)放入集合，否則將相同字母 A 的數(shù)據(jù)放在一起(cityType.city.push(value))。 **

4. 遍歷到最后一條數(shù)據(jù)時(shí)，需要對(duì)最后一條數(shù)據(jù)進(jìn)行處理，結(jié)束后將最后一個(gè)字母相同的數(shù)據(jù)存入城市集合。

if (number == data.length - 1) {
            if (!cityType.city.includes(value)) {
              cityType.city.push(value)
            }
            this.cityList.push(cityType)
          }

5. 經(jīng)過(guò)以上對(duì)數(shù)據(jù)的處理，終于得到了完整的城市數(shù)據(jù)，接下來(lái)就是直接展示列表即可。

List({ space: 14, initialIndex: 0, scroller: this.scroller }) {
          ForEach(this.cityList, (bean: HotCityTypeBean, index: number) = > {
            if (index == 0) {
              ListItem() {
                Text() {
                  Span("當(dāng)前城市: ")
                    .fontSize($r("app.float.sp_t5"))
                    .fontColor($r("app.color.color_S5"))
                  Span(this.cityName)
                    .fontSize($r("app.float.sp_t5"))
                    .fontColor($r("app.color.color_S7"))
                }
              }.margin({ top: $r("app.float.vp_10") })

            }
            ListItemGroup({ header: this.headView(bean.name) }) {
              ForEach(bean.city, (item: HotCityBean, childIndex: number) = > {
                ListItem() {
                  Column() {
                    Text(`${item.cityName}`)
                      .height(44)
                      .fontSize($r('app.float.sp_t4'))
                      .width(FULL_WIDTH)
                      .onClick(() = > {
                       
                      })
                    if (childIndex == bean.city.length - 1) {
                      Divider()
                        .color($r('app.color.color_S3'))
                        .height(0.5)
                        .vertical(false)
                    }
                  }.alignItems(HorizontalAlign.Start)
                }
              }, (item: HotCityBean, childIndex: number) = > `${childIndex}${new Date()}`)
            }
          }, (bean: HotCityTypeBean, index: number) = > `${index}${new Date()}`)
        } .sticky(StickyStyle.Header)

6. 使用ListItemGroup 用來(lái)顯示每組城市的首字母，sticky(StickyStyle.Header) 則是開(kāi)啟粘性標(biāo)題，也就是滑動(dòng)列表時(shí)，每組城市的首字母固定顯示在上方。

總結(jié)

本文詳細(xì)講述了對(duì)城市數(shù)據(jù)的處理，包括對(duì)音字，首字母排序以及按首字母對(duì)數(shù)據(jù)進(jìn)行分組處理，特別是分組處理這塊的代碼比較復(fù)雜，需要親自動(dòng)手嘗試才能更好的理解，學(xué)會(huì)的小伙伴趕緊動(dòng)手試試吧！如果您有更好的處理方式，歡迎評(píng)論區(qū)留言！