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 相关文章推荐
js常用代码段收集
Oct 28 Javascript
javascript获取xml节点的最大值(实现代码)
Dec 11 Javascript
AngularJS中取消对HTML片段转义的方法例子
Jan 04 Javascript
javascript实现检验的各种规则
Jul 31 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
微信小程序 支付功能(前端)的实现
May 24 Javascript
通过命令行创建vue项目的方法
Jul 20 Javascript
基于rollup的组件库打包体积优化小结
Jun 18 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
Apr 24 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
在PHP3中实现SESSION的功能(一)
2006/10/09 PHP
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
php另类上传图片的方法(PHP用Socket上传图片)
2013/10/30 PHP
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
sogou地图API用法实例教程
2014/09/11 Javascript
JavaScript实现查找字符串中第一个不重复的字符
2014/12/29 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python实现简单的TCP代理服务器
2014/10/08 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
Django中间件工作流程及写法实例代码
2018/02/06 Python
pandas object格式转float64格式的方法
2018/04/10 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
基于Python的图像数据增强Data Augmentation解析
2019/08/13 Python
python pygame实现球球大作战
2019/11/25 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
《唯一的听众》教学反思
2014/02/20 职场文书
幼儿园中班区域活动总结
2014/07/09 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
python基于tkinter制作下班倒计时工具
2021/04/28 Python
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android