Vue实现选择城市功能


Posted in Javascript onMay 27, 2017

查看完整的代码请到   我的github地址  https://github.com/qianyinghuanmie/vue2.0-demos

一、结果展示

Vue实现选择城市功能

二、前期准备:

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'自己要引入的文件或接口。

渲染列表的时候,将数据组成数组对象的形式,例如这样

Vue实现选择城市功能

这样的话可以一次将字母列表和城市列表一起渲染出来。不过要想把对应的汉字都放到对应的字母后面,我们引入了一个插件,可以用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 = []
  }
  for (let i = 0; i < cityNamesFilter.length; i++) {
   let _index = Number(_this.getFirstLetter(cityNamesFilter[i]).charCodeAt() - 65)
   if (_index >= 0 && _index < 26) {
   letter[_index].citylist.push(cityNamesFilter[i])
   }
  }
  // 如果letter中citylist中没有值的话,过滤这一项
  showCity = showCityTemp = letter.filter(function (value) {
   let len = value.citylist.length
   return len > 0
  })
  },
<template>
 <div id="city">
 <header-item message="城市列表" backUrl="/"></header-item>
 <div class="search-city"><input type="text" placeholder="请输入要搜索的城市" v-model="citySearch" :value="citySearch"></div>
 <div>
  <div id="showCityContent"></div>
  <div v-for="item in showCity" class="letter-item">
  <div><a :id="item.letter">{{item.letter}}</a></div>
  <div v-for="i in item.citylist">{{i}} </div>
  </div>
 </div>
 <aside class="letter-aside">
  <ul>
  <li v-for="item in showCity" @click="naver(item.letter)">{{item.letter}} </li>
  </ul>
 </aside>
 <div id="tip">
  {{tipString}}
 </div>
 </div>
</template>

从上可看出只用了showCity这个数据进行v-for 。

2、构建完主体以后,其实右侧的字母栏与中间的字母生成方式是一致的,在定位的方面采用的是js中的scrolltop的方法,用锚点的方法也是可以的,有兴趣的可以自己试试。

naver: function (id) { // 点击右边字母滚动
  this.tipString = id
  let obj = document.getElementById(id)
  let tip = document.getElementById('tip')
  tip.setAttribute('class', 'tipAppear')
  setTimeout(function () {
   tip.removeAttribute('class')
  }, 500)
  let oPos = obj.offsetTop
  return window.scrollTo(0, oPos - 36)
  },

在滚动的同时,中间也加入了字母的显示动画。

这样的话,城市列表的显示和导航基本完成,接下来的重点在于搜索城市。

3、实现搜索城市

Vue实现选择城市功能

原理说起来很简单,就是在列表中去寻找还有输入字符的项,找到了就可以的让他显示出来。

由于vue的便利性,我们不需要去自己进行对dom太多操作,只需要对数据进行操作。

可以看出这一块并没有隐藏第一次渲染出的结构,而是确确实实的没有构建,这都得益于vue对虚拟dom的操作,这里就不细说了。

Vue实现选择城市功能

 在实现这个功能的时候,用到了vue中watch,可以用来观察数据的改变,当数据改变的时候,绑定函数。

watch: {
  citySearch: function (newCitySearch) { //citySearch是input中输入的值
  this.cityFilter(newCitySearch)
  }
 cityFilter: function (city) { // 城市搜索筛选
  let showCityListTemp
  this.buildItem(cityNamesFilter)
  showCity = showCityTemp
  showCity = showCity.filter(function (value) {
   showCityList = value.citylist
   showCityListTemp = showCityList.filter(function (val) {
   return (val.indexOf(city) > -1)
   })
   value.citylist = showCityListTemp
   return value.citylist.length > 0
  })
  this.showCity = showCity
  if (showCity.length === 0) {
   let _showCityContent = document.getElementById('showCityContent')
   _showCityContent.innerText = '查询不到结果'
   _showCityContent.setAttribute('class', 'tipShow')
  } else {
   document.getElementById('showCityContent').innerText = ''
  }
  }

到这里,基本的的城市算是做完了。

查看完整的代码请到   我的github地址  https://github.com/qianyinghuanmie/vue2.0-demos

以上所述是小编给大家介绍的Vue实现选择城市功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript获取GridView中用户点击控件的行号,列号
Apr 14 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
Aug 23 Javascript
Js 时间函数getYear()的使用问题探讨
Apr 01 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
Jun 08 Javascript
JS简单实现文件上传实例代码(无需插件)
Nov 15 Javascript
javascript放大镜效果的简单实现
Dec 09 Javascript
jquery统计用户选中的复选框的个数
Jun 06 Javascript
vue input输入框模糊查询的示例代码
May 22 Javascript
DatePickerDialog 自定义样式及使用全解
Jul 09 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
Oct 23 Javascript
JS+CSS实现3D切割轮播图
Mar 21 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
May 13 Javascript
使用 Node.js 对文本内容分词和关键词抽取
May 27 #Javascript
vue子组件使用自定义事件向父组件传递数据
May 27 #Javascript
javascript回调函数的概念理解与用法分析
May 27 #Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 #Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 #Javascript
详细讲解vue2+vuex+axios
May 27 #Javascript
AngularJS获取json数据的方法详解
May 27 #Javascript
You might like
php 5.3.5安装memcache注意事项小结
2011/04/12 PHP
php设计模式之命令模式使用示例
2014/03/02 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
JavaScript入门教程(6) Window窗口对象
2009/01/31 Javascript
Jquery Select操作方法集合脚本之家特别版
2010/05/17 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
js实现返回顶部效果
2017/03/10 Javascript
AngularJS的ng-click传参的方法
2017/06/19 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
AngularJs 终极购物车(实例讲解)
2017/11/08 Javascript
使用FormData实现上传多个文件
2018/12/04 Javascript
vue实现浏览器全屏展示功能
2019/11/27 Javascript
详谈vue中router-link和传统a链接的区别
2020/07/22 Javascript
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
Python抓取电影天堂电影信息的代码
2016/04/07 Python
Python编程使用tkinter模块实现计算器软件完整代码示例
2017/11/29 Python
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
python调用opencv实现猫脸检测功能
2019/01/15 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
后端开发使用pycharm的技巧(推荐)
2020/03/27 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
大数据分析用java还是Python
2020/07/06 Python
django rest framework 过滤时间操作
2020/07/12 Python
Amaze UI 文件选择域的示例代码
2020/08/26 HTML / CSS
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
毕业生见习报告总结
2014/11/08 职场文书
悬空寺导游词
2015/02/05 职场文书
《比的意义》教学反思
2016/02/18 职场文书
利用JavaScript写一个简单计算器
2021/11/27 Javascript