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 相关文章推荐
40款非常有用的 jQuery 插件推荐(系列一)
Dec 21 Javascript
JavaScript控制Session操作方法
Jan 17 Javascript
JS中的异常处理方法分享
Dec 22 Javascript
Jquery简单分页实现方法
Jul 24 Javascript
JavaScript基本的输出和嵌入式写法教程
Oct 20 Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
javascript实现一个网页加载进度loading
Jan 04 Javascript
vue下拉列表功能实例代码
Apr 08 Javascript
详解如何在JS代码中消灭for循环
Dec 11 Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 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
咖啡与牛奶
2021/03/03 冲泡冲煮
PHP执行速率优化技巧小结
2008/03/15 PHP
学习php笔记 字符串处理
2010/10/19 PHP
thinkphp3.0 模板中函数的使用
2012/11/13 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
twig模板常用语句实例小结
2016/02/04 PHP
PHP框架性能测试报告
2016/05/08 PHP
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
自己编写的类似JS的trim方法
2013/10/09 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
在Webpack中用url-loader处理图片和字体的问题
2020/04/28 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
python编写微信远程控制电脑的程序
2018/01/05 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
Python清空文件并替换内容的实例
2018/10/22 Python
Pyqt5 基本界面组件之inputDialog的使用
2019/06/25 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
django-csrf使用和禁用方式
2020/03/13 Python
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
乌克兰巴士票购买网站:inBus
2021/03/12 全球购物
学年自我鉴定范文
2013/10/01 职场文书
业务部主管岗位职责
2014/01/29 职场文书
道德模范先进事迹
2014/02/14 职场文书
文案策划求职信
2014/04/14 职场文书
企业安全生产标语
2014/06/06 职场文书
农业项目建议书
2014/08/25 职场文书
教师工作表现评语
2014/12/31 职场文书
vue项目支付功能代码详解
2022/02/18 Vue.js