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.csdn.net/qq_39258914/article/details/81119044
版权
前端 同时被 3 个专栏收录
11 篇文章 0 订阅
订阅专栏
vue
8 篇文章 0 订阅
订阅专栏
移动端
4 篇文章 0 订阅
订阅专栏

 演示地址：vue城市列表 

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

预览图

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

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

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

qq_39258914
关注
  • 7
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
SortSelect vue + elementui自定义按首字母排序下拉列表组件
10-27
vue + elementui自定义按首字母排序下拉列表组件，可点击字母定位到对应选项，支持选中事件，可扩展
vue实现点击字母切换对应的城市
智者劳心
03-11 1303
安装：cnpm install better-scroll@1.8.1 --save 引入：import Bscroll from 'better-scroll' 使用： 一定要用ref定义到最外层的大div 内层的div里面是要滚动的数据 <div ref="aaa"> <div></div> </div> mounted() { this.scrol.
按顺序生成字母编号：A,B,C.....Z,AA,AB,AC
最新发布
qq_42381950的博客
05-28 72
上班写一个考试的功能 要求前端自动生成A,B,C的编号，突然脑洞大开，万一有人无聊按到Z以上怎么办，就随手写的代码。
基于vue封装的城市择器组件
workit123的博客
08-21 939
基于vue封装的城市择器组件 基本功能： 支持全选、反选以及全部清空。 支持按拼音筛选。 勾选省份将会勾选省份下所有城市。 支持数据回显 项目目录图 1、regions.js export default [{ "city": [{"name": "北京市", "shortName": "北京", "id": "1101", "cityIndex": 0, "pinYin": "beijing"}], "province": {"name": "北京市", "shortName": "
vue3 项目 - 组件封装 - 图标选择器
努力小张 https://nice_995.gitee.io/blog || https://skye-iiii.github.io/Blog/
08-27 2864
Vue3 全局注册 element-plus Icon组件及图标选择器组件封装
根据首字母列表选择城市
Schrodinge的博客
03-03 1891
vue实现根据首字母列表点击选择城市 实现点击字母跳转相对应城市，先看下效果 先获取城市列表 async getCityList() { //封装的请求调用 const res = await intercept({ method: "general.uppercitylist"//接口参数 }); let arr = []; ...
vue3 使用 element-china-area-data 实现地区选择器
weixin_45816407的博客
08-09 2926
codeToText是个大对象，属性是区域码，属性值是汉字 用法例如：codeToText[‘110000’]输出北京市。provinceAndCityData省市二级联动数据,汉字+code。pcaTextArr省市区联动数据，纯汉字。regionData省市区三级联动数据。pcTextArr省市联动数据，纯汉字。我引用的是v6版本，组件有改动。省市区三级联动，纯汉字。
Vue + better-scroll 实现移动端字母索引导航功能
12-11
vue+ better-scroll 实现移动端歌手列表字母索引导航。算是一个学习笔记吧，写个笔记让自己了解的更加深入一点。 Demo：list-view，使用 chrome 手机模式查看。换成手机模式之后，不能滑动的话，刷新一下就 OK 了。 ...
vue实现移动端拖动排序
10-14
主要为大家详细介绍了vue实现移动端拖动排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
VUE实现移动端列表筛选功能
10-16
在Vue.js中实现移动端列表筛选功能，通常涉及到组件化开发、事件绑定以及数据管理等多个方面。以下是一个基于Vue和 vant 框架实现的简单示例，它包括一个可展开的筛选菜单和筛选按钮。 首先，`...
用vue实现按字母排序的多选列表功能类似通讯录
前端岚枫
07-12 8084
这两天做项目，pc端本来是一个简单的select多选功能，做到客户端的时候，产品要求做成按字母排序功能，类似手机通讯录功能，由于我们客户端用的滴滴的cube-ui 组件，我选择了cube-ui IndexList，在它的基础上进行扩展。大致效果如果下图 其实难点在于如何处理数据，研发返回的数据，返回的格式如：{ "error": 0, "payload": { "count": "16",...
使用vue模拟通讯录列表,对中文名拼音首字母提取并排序
热门推荐
苦夏木禾
04-10 3万+
一个功能需求,做一个类似联系人列表的功能,点击名称获取对应的id,样式简陋,只是一个模板,原来是uniapp项目,根据需要改成了vue,需要的自行设计css 流程 获取数据 提取首个字的拼音的首个字母 排序并分组 直接上代码吧 <template> <div> <div v-for="(item,index) in indexList"> <div><b>{{item.title}}</b></div> .
vue 城市列表与字母表联动
wyw223的博客
06-27 1635
vue 城市列表与字母表联动 实现两个联动     一是点击右侧字母的时候，城市列表出现相应首字母下的城市     二是鼠标在字母表上滑动的时候，城市列表实时跟着变化 一．点击字母出现相应的列表，给每个字母设置handleLetterClick事件 &lt;template&gt;     &lt;div&gt;        &lt;ul class="list"&g...
vue中省市区
qq_44783880的博客
07-27 1729
v-model=“formData.cityData2”选择好绑定的省市区参数。load-data="loadData"指从后端查询出的全部的省市区数据。@on-change=“cityChange”选择省市区这个动作。
城市联动数据
NiHao___的博客
08-22 1035
/* * 城市 地区 */ const datas = [ { city: '北京市', area: [ '东城区', '西城区', '朝阳区', '丰台区', '石景山区', '海淀区', '门头沟区', '房山区', '通州区', '顺义区', '昌平区', '大兴区', '怀柔区', '平谷区', .
vue JS_最新省市区json数据编码加格式处理
lucky_ax的博客
11-25 2696
在项目过程中，使用到一些组件对于数据格式要求，无法实时找到最新的，所以只有自己动手做数据改造，以前是项目中的一些处理，随便记录一下。 原来的数据格式是酱紫的~ 我想要的数据格式 接下来贴出格式处理的代码，供大家参考~ //引入数据 import districts from '@/common/districts.js'; let districtssheng = districts.province_list let districtsShi = districts.city_list let di
六、Vue项目去哪儿网 - 城市选择页列表布局、Better-scoll的使用及字母表布局
铁锤妹妹的博客
10-28 276
文章目录码云创建city-search分支City.vue中引入List.vue组件List.vue写页面样式使用Better-scoll使列表滚动字母表布局 先上Better-scoll插件 gitHub地址：https://github.com/ustbhuangyi/better-scroll 码云创建city-search分支 输入命令行 git pull git checkout city-list npm run dev City.vue中引入List.vue组件 List.vue写页面样式
Vue项目城市选择页--BetterScroll的使用和字母表布局
知识改变命运，ヾ(◍°∇°◍)ﾉﾞ【求关注】
04-08 242
创建生命周期函数 <template> <div class="list" ref="wrapper"> <div> <div class="area"> <div class="title border-topbottom">当前城市</div> <div ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值