[TOC]
#### 安装字母排序城市数据
* [ ] 饿了么H5端全国城市数据
* [ ] https://shadow.elemecdn.com/lib/city-list@0.0.3/city_list.json
1. 首先看api 接口数据返回的格式
[http://39.97.33.178/api/cityList](http://39.97.33.178/api/cityList)
![](https://box.kancloud.cn/6ff199a86d4fd2c6b064d34287a5afe9_520x632.png)
2. 根据数据结构按照城市py首字母进行排序,并筛选出热门城市
~~~
<script>
import { constants } from 'crypto';
export default {
name: 'City',
mounted() {
this.$http.get('/api/cityList').then(res => {
let data = res.data;
let cities = null;
if (data.msg === 'ok')
{
cities = data.data.cities
this.formatCityList(cities)
}
})
},
methods: {
formatCityList(cities) {
// 排序后的城市
var cityList = [];
// 热门城市
var hotList = [];
// 热门城市过滤
hotList = cities.filter(item => item.isHot)
// 按照城市拼音首字母排序
for (let i=0; i<cities.length; i++)
{
var firstletter = cities[i].py.substring(0,1).toUpperCase()
if (toCom(firstletter)) // 新添加索引
{
cityList.push( { index:firstletter, list:[ {nm:cities[i].nm, id: cities[i].id} ] } )
} else { // 累加已有索引
for (let j=0; j<cityList.length; j++)
{
if (cityList[j].index === firstletter)
{
cityList[j].list.push({ nm: cities[i].nm, id: cities[i].id })
}
}
}
}
cityList.sort((n1, n2) => {
if (n1.index > n2.index)
{
return 1;
} else if (n1.index < n2.index) {
return -1;
} else {
return 0;
}
})
function toCom(firstletter)
{
for (let i=0; i<cityList.length; i++)
{
if (cityList[i].index === firstletter)
{
return false;
}
}
return true;
}
}
}
}
</script>
~~~
- 起步
- 环境搭建
- mock数据
- 基础
- 生命周期
- 过滤器
- 过渡动画
- keyframes动画
- 动画JS钩子
- 路由
- 导航守卫
- 全局守卫
- 监听器
- 自定义组件
- 获取焦点
- mixins
- mixins抽离vuex
- 国际化
- 动态组件
- Dom
- 扩展
- 安装devTools
- scss
- Nuxt引用多个UI库
- vuex
- vuex命名空间
- vuex定义
- cli
- 安装与卸载
- 环境变量
- 杂项
- Mock数据
- FeHelper
- git
- 反向代理
- 本地存储
- stylus
- 常用mixins
- jsonp
- 配置
- mock配置
- 跨域配置
- 自定义路径
- px2rem
- 代理后端请求
- 常用算法
- 字母排序城市数据
- 倒计时
- 通讯录数据结构
- 请求
- axios防止多次请求
- 封装axios请求
- axios使用
- 封装axios
- 插件
- BetterScroll
- 高德定位
- polyfill
- fastClick
- LazyLoad
- storageCache
- moment
- keyFrameAnimation
- vueSwiper
- 组件
- Loading组件
- header组件
- 仿有道App导航
- SupportIcon
- 仿饿了么购物车跳动
- 购物车小球缓动
- 小球飞入购物车
- 仿音乐歌手列表
- 唱片飞入效果
- 搜索组件
- 仿美团PC搜索框
- 页面布局
- stickyFooter
- 背景色渐变
- 背景虚化
- Ui组件
- CubeUi
- CreateApi
- tab滑屏切换
- 索引列表
- BScroll
- BScroll左右联动导航
- vant
- 函数库
- 常用Dom函数库
- axios封装
- 格式化音乐播放时长
- 搜索节流
- time格式化
- JS基础
- window对象中的高度
- JS中的宽高
- 常用正则
- nuxt
- nuxtVuex
- 监听页面滚动
- 监听body滚动
- 监听局部滚动