实现效果图：

HTML代码：

1 
     
       2   
       3   
      
        4     
       
         5       
        search 6       
         7     
       
 8     
       
 9     
       
        10       
        
{
   {city.name}}
11     
       
12   
      
13   
      
       14     
       
        15       
        当前城市:16       
        17       
        ×18     
       
19   
      
20   
      21   
      
       22           
       
        23             
        
热门城市
24             
        
25             
        
A
26             
        
B
27             
        
C
28             
        
D
29             
        
E
30             
        
F
31             
        
G
32             
        
H
33             
        
J
34             
        
K
35             
        
L
36             
        
M
37             
        
N
38             
        
P
39             
        
Q
40             
        
R
41             
        
S
42             
        
T
43             
        
W
44             
        
X
45             
        
Y
46             
        
Z
47           
       
48         
      
49   
      
       50       
       
        51         
        
         52           
         {
   {cityDetail.name}}53           
         
{
   {city.name}}
54         
        
55     
       
56   
      
57 58 
     

css样式：

1  body {  2       background: #fbfafa;  3       margin: 0;  4       padding: 0;  5     }  6   7     #box {  8       width: 100%;  9       height: 100%; 10       margin: 0 auto; 11     } 12  13     ul,li { 14       list-style: none; 15       margin: 0; 16       padding: 0; 17     } 18  19     .search-header { 20       /*position: relative;*/ 21       height: 2.6667rem; 22       background: #F2F2F2; 23       z-index: 1000; 24       margin: 0.8333rem 1.25rem; 25       display: flex; 26       text-align: center; 27       line-height: 2.6667rem; 28       border-radius: 1.25rem; 29     } 30  31     .search-header .form { 32       width: 100%; 33       display: flex; 34       height: 100%; 35       border-radius: 0.4167rem; 36       position: relative; 37     } 38  39     .search-btn { 40       width: 3.5rem; 41       height: 2.6667rem; 42     } 43  44     .search-icon { 45       position: absolute; 46       left: 1.25rem; 47       width: 1.25rem; 48       height: 1.25rem; 49       background-size: 1.25rem; 50     } 51  52     .cancel { 53       width: 1.25rem; 54       height: 1.25rem; 55       vertical-align: middle; 56       background-size: 1.25rem; 57       border-radius: 50%; 58       margin-left: 0.25rem; 59       font-size: 20px; 60     } 61  62     .shade-box{ 63       position: fixed; 64       top: 68px; 65       left: 0; 66       right: 0; 67       bottom: 0; 68       z-index: 100; 69       background: rgba(0,0,0,0.6); 70     } 71     .search-city-box { 72       position: absolute; 73       top: 2.6667rem; 74       border: 0.0833rem solid #E5E5E5; 75       border-bottom: none; 76       background: #fff; 77       /*width: 100%;*/ 78       border-radius: 0.4167rem; 79       max-height: 24.6667rem; 80       overflow: hidden; 81       right: 50px; 82       left: 20px; 83       margin: 0; 84       padding: 0; 85       z-index: 300; 86       overflow-y:auto; 87     } 88  89     .search-city-li { 90       height: 3rem; 91       border-bottom: 0.0833rem solid #E5E5E5; 92     } 93  94     .form input { 95       display: block; 96       background: #F2F2F2; 97       border: none; 98       outline: none; 99       padding: 0.75rem 2.9167rem 0.75rem 0.8333rem;100       font-size: 12px;101       color: #9D9D9D;102       width: 70%;103       border-radius: 1.25rem;104       text-align: center;105     }106 107     .position-city {108       height: 3.5rem;109       line-height: 3.5rem;110       padding: 0 0.4167rem 0 1.25rem;111       border-top: 0.0833rem solid #E5E5E5;112       border-bottom: 0.08333rem solid #E5E5E5;113     }114 115     .showLetter span {116       width: 4.1667rem;117       height: 4.1667rem;118       line-height: 4.1667rem;119       font-size: 2.5rem;120     }121 122     .container {123       margin: 0 1.25rem;124       height: 35.3333rem;125     }126 127     .letter {128       width: auto;129       position: fixed;130       top: 5rem;131       right: 0.8333rem;132       text-align: center;133     }134 135     .letter ul {136       list-style-type: none;137     }138 139     .letter ul li a {140       text-decoration: none;141       color: #5ECDAF;142       font-size: 0.6667rem;143     }144 145     .host-city {146       display: inline-block;147       color: #5ECDAF;148       font-size: 0.6667rem;149       width: 2.3333rem;150       height: 3.5rem;151       overflow: hidden;152     }153 154     .city {155       height: 100%;156     }157 158     .city-list {159       margin-right: 0.8333rem;160       display: flex;161       flex-wrap: wrap;162     }163 164     .city-list .city-letter {165       font-size: 1.25rem;166       display: inline-block;167       padding-top: 1.25rem;168       padding-bottom: 0.4167rem;169       color: #5ECDAF;170       width: 100%;171     }172 173     .city-list p {174       color: #000000;175       font-size: 1rem;176       width: 28%;177       height: 2.5rem;178       line-height: 33px;179       text-align: center;180       margin: 0.4167rem 0.8333rem 0.4167rem 0;181       overflow: hidden;182       border: 0.0833rem solid #E5E5E5;183       cursor: pointer;184     }185 186     .city-list .city_selected {187       border: 0.0833rem solid #5ECDAF;188     }

js代码：

1 

项目代码请看：