成果展示

最后的成果就是下面所展示的内容，因为可交换的图像格式图没有做，只能截图所展示，接下来，会带着大家一步一步的完成下面功能，脚手架搭建和结节安装在本次案例不会讲解，如果了解，可以在我的博客园找到有详细介绍

准备工作：

引入爱可信插件，调用更好的滚动第三方插件，本地数据文件，可以参考目录中的city.json，有条件的也可以自己去扒

功能分析

1.获取数据数据展示城市列表。

2.侧边字母定位滚动到相应的位置。

3.实现搜索城市

接下来我们开始对组件进行划分：本次案例中，总共划分为五个组件，下面就是组件的划分图

创建城市组件，通过父组件获取数据，传递给子组件

模板div class=' city '城市标题/城市标题/头部搜索：列表='城市'/搜索//搜索List : hot=' hot city ' : letter=' letter ' : List=' city '/List//城市列表Alphabet @ Chang=' handleLetterChang ' : list=' city '/Alphabet//A-Z/div/templatescriptimport axios from ' axios ' import city header from ' ./组件/标题"导入搜索来源"。/组件/搜索"导入列表来源"。/组件/列表"从导入字母表"。/components/Alphabet ' export default { data(){ return { citis : } }，//城市列表热点城市3360[]，//热门城市letter: '' //A-Z } }，components: { CityHeader，Search，List，Alphabet }，methods : { getcity info(){ axios。get('/API/city。JSON ').然后(this.getCityInfoSucc) }，getcity infosucc(RES){ RES=RES . data if(RES . ret RES . data){ const data=RES . data this。热点城市=数据。这个城市很热。城市=数据。城市}控制台。日志(这个。城市)}，handleLetterChang(字母){ //接受子组件传过来的//控制台。把这个记录下来。字母=字母} }，挂载(){ this。getcity info()} }/脚本样式作用域lang="手写笔"/style

把得到的数据分次传递个对应的子组件，这样有利于网站优化，不用频繁的请数据

模板div class=' city '城市标题/城市标题Search : List=' city '/Search List : hot=' hot city ' :字母=' letter ' : List=' city '/List Alphabet @ Chang=' handleLetterChang ' : List=' city '/Alphabet/div/模板导出默认{ data(){ return { city : }，//城市列表热点城市3360[]，//热门城市letter: '' //A-Z } }，components: { CityHeader，Search，List，Alphabet }，methods : { getcity info(){ axios。get('/API/city。JSON ').然后(this.getCityInfoSucc) //请求本地配置的模拟的数据}，getcity info succ(RES){ RES=RES . data if(RES . ret . RES . data){ const data=RES . data this。热点城市=数据。像这样的热点城市。城市=数据。city } }，mounted () { this.getCityInfo () }}创建头部组件，

模板div class='header '城市选择router-link to='/' div class=' icon font back-icon '/div/router-link/div/template script导出默认{ }/脚本样式作用域lang='手写笔' @ import ' ~ style/variables。styl '；@ import ' ~ style/mixins。styl '；收割台溢流：隐藏高度$页眉高度行高： $页眉高度文本对齐：中心颜色： # fff背景： $ bgColor字号：4雷姆.背面-图标位置：绝对左侧： 0顶部： 0宽度：64毫米字体大小：四毫米文本-对齐：中心颜色： # fff/样式创建搜索组件页面，接受父组件传递的数据，引入更好的滚动第三方插件，实现列表滚动

模板div class='search '输入v-model=' keyword ' class=' search-input ' type=' text '占位符='输入城市名或者拼音//div class=' search-content ' ref=' search ' v-show=' keyword ' ul Li class=' serach-item border-bottom ' v-for=' listItem ' : key=' item。id“{ item。name } }/Li Li v-show=' Hasnodata ' class=' serach-item border-bottom '没有搜索到匹配的数据/Li/ul/div/div/templatescriptimport b从更好的卷轴导出默认值{ props: { list: Object，}，data() { return { keyword: ' '，listItem:[]，timer:null } }，computed : { hasNoData(){ return！this.listItem.length //没有搜索的条件是否显示} }，watch: {关键字(){ if(this。计时器){ cleartime out(这。timer)} if(！this.keyword) { //清空this.listitem=' ' return } this。timer=setTimeout(()={ const result=[]for(让我在这个。目录中){ this.list[i].forEach(值)={ //匹配搜索的条件if(值。法术。(这个的索引。关键字)-1 | |值。名字。(这个的索引。关键字)-1){结果。push(value)} })}这个。listitem=result }，100) })，mounted(){ this。滚动=新的滚动(这.$refs.search) }}/scriptstyle作用域为lang='手写笔' @ import ' ~ style/variables。styl ' @ import ' ~ style/mixins。styl .搜索身高：72雷姆帕德： 0。1雷姆背景：美元bgColor .搜索-输入框-尺寸：边框-框宽：100%高：62 em线-高：62 em文本-对齐：中心边框-半径： 06雷姆填充： 0 0 .1个em颜色： #666 .搜索-内容z-索引：1溢出3360隐藏位置：绝对顶部： 1。serach-项目行高：62 rem填充-左侧：2 rem颜色： # 666背景： # fff/风格创建城市列表组件，引入更好的滚动插件，实现列表滚动，通过看监听字母，实现字母与城市列表滚动

模板div class=' list ' ref=' wrapper ' div class=' area ' div class=' title border-top bottom '当前城市/div class=' button-list ' div class=' button-wrapper ' div class=' button '郑州/div/div/div/div class=' area ' div class=' title border-top bottom '热门城市/div class=' button-list ' div class=' button-wrapper ' v-for=' item in hot ' : key=' item。id为“div class=”的按钮“{ item。name } }/div/div/div class=' area ' v-for='(item，key)list ' : ref=' key ' : key=' key ' div class=' title border-top bottom ' { key } }/div ul class=' item-list ' Li class=' $ refs . wrapper)}，watch:{ letter () { //监听列表滚动事件a-Z如果(这个。字母){ const element=this .$ refs[this。字母[0]这个。滚动到元素(元素)} } } }/脚本样式作用域lang='手写笔' @ import ' ~ style/variables。styl '；@ import ' ~ style/mixins。styl '；边框-顶部底部：背景： # CCC前：背景： # CCC后：边框-底部：背景： # CCC前3:列表溢出3:隐藏位置：绝对top :58雷姆左33600右33600底：0 .标题行-高度：54毫米；背景技术# eee左填充：2毫米；color: # 666font-size :26雷姆；按钮列表飞越：隐藏隐藏padd :1雷姆。6雷姆。1雷姆。1雷姆.纽扣包装纸浮动：列宽：33.33%。按钮边距：1雷姆帕德：1 rem 0文本对齐：中心边框：02rem实线#ccc边框-radius:06rem .项目列表。项目行-高度：76 rem颜色： # 212121填充-左：2 rem字号：28 rem文本-溢出：省略号白色-space: nowrap/style创建字母组件，点击字母，左边列表城市想对应，通过这个$emit .事件，子组件在触发的事件传递给父组件，父组件通过子组件传递的事件，在传递给目录组件，

模板div类=' list ' Li类=' item ' : ref=' item ' @ click=' handelclick ' @ touchstart=' handleTouchStart ' @ touch move=' handleTouchMove ' @ touch end=' handleTouchEnd ' v-for=' item of letter ' : key=' item ' }/Li/div/template script导出默认{ prop : { list : Object }，data(){ return { touchstart 333: false，startY:0offsetTop }，计算出： { letter(){ const letter=[]for(让我在这。列表){//循环字母a-Z。push(I)} return letter } }，methods : { handlick(e){ this .$emit('chang '，e.target.innerText) //传给父组件City }、handleTouchStart () { //手指放上this.touchstart=true }，handleTouchMove (e) { //手指移动如果(这个。触摸开始){ if(this。timer){ clearInterval(这个。计时器)}这个。timer=setTimeout(()={ const Touchy=e . touch[0]).clientY -79 //到蓝色头部的距离常量索引=数学。地板((touch-this。starty)/20)if(index=0索引此。信。长度){这个.$emit('chang '，这个。字母[index])} }，16) } }，handleTouchEnd () { //手指离开这个。touch start=false } } }/脚本样式作用域lang='手写笔' @ import ' ~ style/variables。styl '；@ import ' ~ style/mixins。styl '；列表显示：伸缩方向：列对齐内容：中心位置：绝对顶部： 1.58雷姆权利： 0底部： 0宽度： 4雷姆.项目行-高度高度：44毫米文本-对齐：中心颜色：美元bgColor list-style : one/style总结

以上就是边肖介绍给大家的vue实现城市列表选择功能，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！