angular2--怎么实现城市列表选择功能，类似于通信录功能

最新推荐文章于 2021-03-29 18:44:07 发布

Ariel_ckr

最新推荐文章于 2021-03-29 18:44:07 发布

阅读量914

点赞数

CC 4.0 BY-SA版权

分类专栏： angular2+onsenui框架文章标签： angular2

本文链接：https://blog.youkuaiyun.com/Ariel_201311/article/details/88254908

本文介绍了如何在Angular2中实现类似通信录的城市列表选择功能，包括点击字母跳转、滑动高亮和选中城市显示。通过格式化数据和编写相关代码，实现了从数据到界面的渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果如下：

一、右侧有26个字母，用户点击字母的时候，列表会跳到对应字母的城市区域
二、页面滑动的时候，经过的城市区域，在右侧字母列表处有高亮提示
三、用户选择一个城市的时候，选择的城市信息会显示在头部==》当前城市位置

代码实现步骤：

一、在头部定义一个盒子，用于接收用户选择的城市

<div class="city-box">
  <div class="city-header">当前城市</div>
  <div class="city-body city-list" *ngIf="cityType">
      <div class="city-item active">{
  
  {cityType}}</div>
   </div>
</div>

二、接着就是要循环渲染各个字母对应的城市名称列表了

<div class="city-box" #cityBox (scroll)="noscroll($event)">
    <div *ngFor="let item of cityList">
       <!-- 对应的英文字母-->
      <p class="city-header" [id]="'city-'+item.cityIndex">{
  
  {item.cityIndex}}</p>     
       <!-- 每个对应字母下的城市列表-->
      <div class="city-body city-list border-btm">    
        <div class="city-item" *ngFor="let i of item.cityList"