Vue实现选择城市功能实现选择城市功能
主要介绍了Vue实现选择城市功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
查看完整的代码请到 我的github地址 https://github.com/qianyinghuanmie/vue2.0-demos
一、结果展示一、结果展示
二、前期准备:二、前期准备:
1.引入汉字转拼音的插件,利用NPM安装 代码指令为 npm install pinyin --save ,详细步骤请到pinyin
2.引入vue-resource,调用json文件,可以参考目录中的city.json,有条件的也可以自己去扒
三、三、 分析分析
所实现的功能点:所实现的功能点:
1、获取json数据展示城市列表 。
2、侧边字母定位滚动到相应的位置。
3、实现搜索城市
1、实现、实现1的逻辑,主要是引入的逻辑,主要是引入vue-resource,然后利用其中,然后利用其中http的功能去调用的功能去调用json文件,当然文件,当然api也是同样可以也是同样可以 。。
this.$http.get('/static/city.json').then(response => {/* 要进行的数据处理 */}) // '/static/city.json'自己要引入的文件或接口。
渲染列表的时候,将数据组成数组对象的形式,例如这样
这样的话可以一次将字母列表和城市列表一起渲染出来。不过要想把对应的汉字都放到对应的字母后面,我们引入了一个插件,可以用npm直接安装 。
引入汉字转拼音的插件,利用NPM安装 代码指令为 npm install pinyin --save ,详细步骤请到pinyin
引入之后调用
getFirstLetter: function (str) { // 得到城市第一个字的首字母
return pinyin(str)[0][0].charAt(0).toUpperCase()
},
buildLetter: function () { // 构建字母项
letter = []
for (let i = 0; i < 26; i++) {
let obj = {}
obj.letter = String.fromCharCode((65 + i))
obj.citylist = []
letter.push(obj)
}
},
buildItem: function (cityNamesFilter) { // 构建城市
this.buildLetter()
let _this = this
for (let i = 0; i < 26; i++) {
letter[i].citylist = []
评论0