vue实现按字母选择城市,点击字母跳转对应项目demo(含修改滚动条样式)代码全

先上图看效果

vue实现按字母选择城市,点击字母跳转对应项目demo(含修改滚动条样式)代码全_第1张图片

需求:顶部接口获取热门城市及城市Id,中部通过点击哪个字母底部自动跳转到哪个字母那一项获取城市id

按字母城市列表json   链接:https://pan.baidu.com/s/126kgYEIBPwc8z-UgKcV4GQ     提取码:wt8u 

三级城市列表json  链接:https://pan.baidu.com/s/1Qf4YsgJelHLyihKbAFwbxg   提取码:yi7a 

这两个城市json 的城市id 都是对应的,可以配合使用

 

上代码↓↓↓↓ 请自动略过多余代码






 

思路:点击下拉框显示整体元素,底部加overflow-y: auto;滚动,渲染时按字母分块渲染,点击哪个字母通过索引获取这个字母在元素内的整体高,更改整体元素的滚动条高度就行了,高度如果不合适可以细微的调整下!点击二级城市获取 城市的id 让元素隐藏即可 (选择完之后执行另外的方法)

 

已经介绍的很详细了,再遇到这种功能的直接可以拿来复用了

 

补充:

一定要在用这个功能的页面引用!这点我犯了个错,在首页引用的城市数据,没考虑到用户通过其他途径直接打开子页面,这个功能就没加载城市数据导致不能用!(因是组件式开发的,我这里把 这个功能写在Header 组件中)

问题不分大小在于谨记!!!

vue实现按字母选择城市,点击字母跳转对应项目demo(含修改滚动条样式)代码全_第2张图片

 

更多技巧请查看vue专栏   https://blog.csdn.net/qq_42221334/column/info/27230/1

 

 

你可能感兴趣的:(Vue,vue专栏)