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 相关文章推荐
激活 ActiveX 控件
Oct 09 Javascript
Javascript 面向对象编程(一) 封装
Aug 28 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 Javascript
jquery的ajax跨域请求原理和示例
May 08 Javascript
JQuery 在线引用及测试引用是否成功
Jun 24 Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 Javascript
利用python分析access日志的方法
Oct 26 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 Javascript
vue中倒计时组件的实例代码
Jul 06 Javascript
通过JS判断网页是否为手机打开
Oct 28 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 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
JAVA/JSP学习系列之七
2006/10/09 PHP
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
jquery photoFrame 图片边框美化显示插件
2010/06/28 Javascript
浅析document.ready和window.onload的区别讲解
2013/12/18 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
JavaScript中原型和原型链详解
2015/02/11 Javascript
基于JavaScript实现类似于百度学术高级检索功能
2016/03/02 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
一个简单的JavaScript Map实例(分享)
2016/08/03 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
2017/04/21 jQuery
vue-cli项目优化方法- 缩短首屏加载时间
2018/04/01 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
在Docker上开始部署Python应用的教程
2015/04/17 Python
pygame播放音乐的方法
2015/05/19 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
python每天定时运行某程序代码
2019/08/16 Python
python os模块在系统管理中的应用
2020/06/22 Python
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
运动员口号
2014/06/09 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
争先创优活动总结
2014/08/27 职场文书
机动车交通事故协议书
2015/01/29 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
贫困生证明范文
2015/06/16 职场文书
SpringBoot集成Redis的思路详解
2021/10/16 Redis