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 相关文章推荐
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 Javascript
IE下双击checkbox反应延迟问题的解决方法
Mar 27 Javascript
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
Jun 19 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
JS实现简单的图书馆享元模式实例
Jun 30 Javascript
Jquery操作cookie记住用户名
Mar 29 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
Oct 05 Javascript
Bootstrap面板学习使用
Feb 09 Javascript
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 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 无限级缓存的类的扩展
2009/03/16 PHP
php中json_encode处理gbk与gb2312中文乱码问题的解决方法
2014/07/10 PHP
PHP 验证登陆类分享
2015/03/13 PHP
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
2015/09/12 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
JS为什么说async/await是generator的语法糖详解
2019/07/11 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python中实现指定时间调用函数示例代码
2017/09/08 Python
python dataframe astype 字段类型转换方法
2018/04/11 Python
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
python批量修改xml属性的实现方式
2020/03/05 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
python实现图像拼接功能
2020/03/23 Python
Python实现随机爬山算法
2021/01/29 Python
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
如何现实servlet的单线程模式
2014/08/05 面试题
学习党课思想汇报
2013/12/29 职场文书
企业年检委托书范本
2014/10/14 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
法制教育主题班会
2015/08/13 职场文书
教师教育心得体会
2016/01/19 职场文书
vue首次渲染全过程
2021/04/21 Vue.js
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python