vue实现移动端地区城市列表按中文首字母索引

已于 2023-02-15 08:58:13 修改
阅读量1.4w 收藏 20
点赞数 7
分类专栏： 前端 vue 移动端 文章标签： 前端 vue 移动端 城市列表
于 2018-07-19 17:08:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_39258914/article/details/81119044
版权
本文介绍了一个基于Vue.js封装的城市列表组件，适用于移动端应用。该组件支持通过首字母快速定位，并包含浏览器自动定位功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 演示地址：vue城市列表 

请在移动端调试模式下预览

预览图

鉴于很多使用的小伙伴说没封装不方便使用，现本人已将该列表封装成组件，但是对数据有一定的格式要求，详情请见我的另一篇博文。

  项目纯净，只有这个功能和浏览器自动定位当前地区功能，不是工程项目，下载下来可以直接在浏览器打开看效果，github地址：GitHub - wenyuming/vue-cityList: vue实现移动端地区列表功能，可按首字母索引跳转，觉得有用的话，点个赞咯，谢谢，各路好汉来了就留个评论呗！

支付宝红包，看过就扫一下呗，扫给我也可以的，谢谢了蛤各位！

uniapp [全端兼容] - 详细实现全国城市列表A-Z市区名称索引功能，根据城市首字母分类排序城市列表选择页面，全屏省市区右侧悬浮字母索引可拖曳滑动及点击定位锚点城市名称（提供最新全国城市数据）
王二红
07-17 1万+
uniapp，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，城市列表，a-z字母的索引排序，市区名称，城市位置，选择位置时的城市列表，城市列表选择，uniApp城市列表选择，整页，通过A-Z排序的城市列表，城市自动按首字母分类，实现城市列表选择页面功能，插件组件，中国全部市区城市索引列表，右侧悬浮a至z排序点击跳转到对应城市首字母列表单独页面，如何实现整页都是市区名称列表的城市选择功能，uviewuni-indexed-list，全国市区列表选择，搜索，根据区
uni-app [全端兼容] - 详细实现城市选择索引列表（通过 A-Z 排序的城市列表），全国城市列表选择右侧a-z字母排序功能，城市自动按首字母分类（详细示例源代码，一键复制运行即可）
王二红
08-10 6859
uniapp，全国市区列表选择，a-z字母排序城市列表，uniapp仿美团饿了么城市列表+顶部搜索，中国34个省市按字母排序uniapp城市列表，uniapp根据区域的首字母进行排序分类并可在右侧进行点击跳转，uni-app选择城市（城市列表选择），uni-app城市选择索引列表（A-Z），英文字母索引全国城市uni-app做A-Z排序城市列表、索引列表，uniapp选择所有城市通过索引方式，英文字母索引全国城市数据，Vueuniapp省份城市列表选择、省市选择，uniapp定位城市索引列表，uv
选择城市，按城市的首字母进行排序
热门推荐
weixin_44694389的博客
01-04 1万+
1.新建父组件choiceCity.vue <template> <view class="choiceCity"> <view class="nav-top"> <view class="searchBox"> <u-icon name="search" size="35" color="#888"></u-icon> <input class="searchInput" type="text"
vue 城市列表与字母表联动
wyw223的博客
06-27 1720
vue 城市列表与字母表联动 实现两个联动     一是点击右侧字母的时候，城市列表出现相应首字母下的城市     二是鼠标在字母表上滑动的时候，城市列表实时跟着变化 一．点击字母出现相应的列表，给每个字母设置handleLetterClick事件 &lt;template&gt;     &lt;div&gt;        &lt;ul class="list"&g...
手机端vuejs城市列表选择首字母定位
ICode联盟
11-08 345
vue.js定位后 选择其他城市进行切换，适用移动端。注：请在移动端预览查看最佳展示效果，pc端无法选择，是一个完整文件 下载下来可以直接运行。分为css、js、index运用到了 vue.js bscroll.min.js (better-scroll) 本地city.js css里面有相对应的 city.css 以及 默认重置文件reset.css注：使用vue-cil的同学们可直接安装 better-scroll 在相应页面引用组件即可。
vue移动端城市列表按首字母排序组件包，有npm包，可直接下载使用
qq_39258914的博客
09-07 4189
初衷，为各使用相关组件的小伙伴写更少的相关代码实现功能，源码在我的被另一篇博文里有，有兴趣的可以去研究，使用过程中有问题的请即时反馈，谢了！qq（微信）591339209，有其他常用到的组件也可以反馈给我，酌情封装！另外要是这个组件还有什么需要优化，或者有哪里使用还不方便的都请反馈一下，留言反馈也没问题。 对你有帮助的话就帮我扫一下支付宝红包呗，不要的扫给我也可以，谢谢了各位，有啥需要可以在下方...
Vue中使用better-scroll插件实现移动端字母侧边导航滚动条（包括列表按首字母排序、点击导航跳转位置）完整实现
weixin_43185419的博客
08-30 1894
实现效果如上图所示。 首先引入better-scroll的组件： 1、npm安装better-scroll插件。npm install–save better-scroll 2、在文件中引入better-scroll。import BScroll from ‘better-scroll’; 排序使用的是pinyin的包，将字符串转成拼音，就可以通过字符串截取取出拼音首字母，这样就可以进行首字母排序了。 1、安装方式： npm install pinyin 2、在应用的.vue文件中单独引入 var pi.
vant IndexBar实现的城市列表的示例代码
10-15
vant IndexBar组件是Vant UI库提供的一个用于实现按字母索引快速查找内容的组件，通常用于实现类似通讯录中快速定位联系人的功能。在文章中，作者通过一个具体的示例来展示了如何使用vant IndexBar组件来实现城市...
手机端Vue.js实现城市列表首字母精确定位技术总结
本文将探讨在移动端使用Vue.js框架实现城市列表首字母定位的几种方法，并对比它们的优缺点。 首先，本文提到了使用H5地理位置API实现定位的方法。H5地理位置API提供了一种标准的方式来获取设备的地理位置信息。在...
vue适用于pc端的城市选择组件按城市首字母排序
08-12
vue适用于pc端的城市选择组件（按城市首字母排序）
vue实现移动端省市区选择
10-16
主要为大家详细介绍了vue实现移动端省市区选择，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现城市列表选择功能
10-18
主要介绍了vue实现城市列表选择功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
实现城市列表，热门城市，字母索引功能
05-18
实现城市列表，热门城市，字母索引功能实现城市列表，热门城市，字母索引功能
vue 移动端 地址选择 字母排序
01-02
vue 移动端 地址选择 字母排序 仿淘宝三级联动 适合移动端
vue中列表数据按照A-Z首字母排列，点击定位到指定字母位置
一个黑曼巴的博客
09-07 2934
核心代码如下 <template> <div class="hello" > <!-- <h1>{{ msg }}</h1> --> <div class="parent"> <div class="list" v-for="(item,index) in list1" :key="index" > <!-- {{item.tag}} --> &l
vue-cli 3.0 实现A-Z字母滑动选择城市列表
weixin_34353714的博客
01-14 1076
项目地址： https://github.com/caochangkui/vue-cli3 项目代码： 城市列表首页： City.vue <template> <div id="city"> <!-- <img src="/logo.png" alt="" height="10px"> --> <div class="wo...
vue实现按字母选择城市，点击字母跳转对应项目demo(含修改滚动条样式)代码全
boy火巨的博客
02-28 4219
先上图看效果 需求：顶部接口获取热门城市及城市Id，中部通过点击哪个字母底部自动跳转到哪个字母那一项获取城市id 按字母城市列表json 链接：https://pan.baidu.com/s/126kgYEIBPwc8z-UgKcV4GQ 提取码：wt8u 三级城市列表json链接：https://pan.baidu.com/s/1Qf4YsgJelHLyihKbAFw...
Vue实现简单的移动端城市选择和搜索页面
最新发布
m0_64664995的博客
10-05 665
可实现模糊搜索，点击右侧导航栏跳到对应字母的位置等。比较简单，可以自行修改。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值