本插件由博主自主开发,比uni插件市场的城市列表滑动组件性能好,且不会出现闪屏的情况。

通过计算城市列表的高度实现滚动到指定位置,使用了uni滚动到指定位置的api

city-chooce为页面入口页,引入文件路径需要自己更改

citySelect.js文件为拼音检索 目前是没有引入使用 有需要使用自取

链接:https://pan.baidu.com/s/1yBO0dqhfmXzITmWrMRI0ng
提取码:z05u

其他需求也可以自己添加,如有不懂的或者需要二级市下面的区县数据请+博主Q 851689968

uni-城市列表滑动组件,点击字母跳转到指定位置的更多相关文章

  1. UITableView——点击某一行移动到指定位置

    选中某一行后想要tableView自动滚动使得选中行始终处于table的top.middle或者bottom,使用以下方法中的一个就可以实现: [tableView scrollToRowAtInde ...

  2. 微信小程序实现按首字母检索城市列表

    不说废话,上效果图 因为我有多处要用到,所以我这里是写成自定义组件的,你也可以直接改成在page页面编写: 布局左边一个scroll-view,显示城市列表,右边一个view显示字母列表,城市列表这边 ...

  3. vue 城市列表与字母表联动

    实现两个联动 一是点击右侧字母的时候,城市列表出现相应首字母下的城市 二是鼠标在字母表上滑动的时候,城市列表实时跟着变化 一.点击字母出现相应的列表,给每个字母设置handleLetterClick事 ...

  4. vue-cli 3.0 实现A-Z字母滑动选择城市列表

    项目地址: https://github.com/caochangkui/vue-cli3 项目代码: 城市列表首页: City.vue <template> <div id=&qu ...

  5. Vue2.5开发去哪儿网App 城市列表开发之 兄弟组件间联动及列表性能优化

    一,  兄弟组件间联动 1.  点击城市字母,左侧对应显示 给遍历的 字母 添加一个点击事件: Alphabet.vue @click="handleLetterClick" ha ...

  6. Android例子源码非第三方实现根据字母排序的城市列表

    values 下dimens.xml <resources> <!-- Default screen margins, per the Android Design guidelin ...

  7. vue实现城市列表选择

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

  8. 【微信小程序】手写索引选择器(城市列表,汽车品牌选择列表)

    摘要: 小程序索引选择器,点击跳转相应条目,索引可滑动,滑动也可跳转 场景:城市选择列表, 汽车品牌选择列表 所用组件: scroll-view(小程序原生) https://developers.w ...

  9. [RN] 全国城市列表选择 (包含定位城市、热门城市、全国城市)

    全国城市列表选择 (包含定位城市.热门城市.全国城市) 用ScrollView 实现,解决 SectionList 实现的卡顿问题 实现效果如图: 代码实现如图: 主逻辑文件 cityList.js ...

随机推荐

  1. phpQuery

    以下资料均来自官方文档,官方文档地址:https://code.google.com/archive/p/phpquery/wikis 基础 示例 phpQuery::newDocumentFileX ...

  2. 鸿蒙内核源码分析(信号量篇) | 谁在负责解决任务的同步 | 百篇博客分析OpenHarmony源码 | v29.01

    百篇博客系列篇.本篇为: v29.xx 鸿蒙内核源码分析(信号量篇) | 谁在负责解决任务的同步 | 51.c.h .o 进程通讯相关篇为: v26.xx 鸿蒙内核源码分析(自旋锁篇) | 自旋锁当立 ...

  3. redis无法连接

     Exception in thread "main" redis.clients.jedis.exceptions.JedisDataException: DENIED Redi ...

  4. docker-compose 搭建mongo集群

    创建目录 在每台机器上操作此步骤 一.在编写容器文件之前的注意事项: 1.yaml文件的指令前端不能使用tab键只能使用空格 2.storage: 指令的对接只能使用 : 不能使用 = 冒号的后面要跟 ...

  5. asp.net core使用identity+jwt保护你的webapi(二)——获取jwt token

    前言 上一篇已经介绍了identity在web api中的基本配置,本篇来完成用户的注册,登录,获取jwt token. 开始 开始之前先配置一下jwt相关服务. 配置JWT 首先NuGet安装包: ...

  6. 前段之BOM ----DOM

    一.介绍 BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行"对话". DOM (Document Object ...

  7. SQL Server 数据库单用户模式处理

    在还原数据库bak备份文件时,由于某种原因(具体何种原因在此不进行分析)导致数据库还原后处于单用户模式,如下图: 单个用户模式导致,数据库无法打开,只能通过脚本去查询数据库内的表,然后进行查询数据,极 ...

  8. 为代码编写稳定的单元测试 [Go]

    为代码编写稳定的单元测试 本文档配套代码仓库地址: https://github.com/liweiforeveryoung/curd_demo 配合 git checkout 出指定 commit ...

  9. Visual Studio 重置窗口布局

    Visual Studio 重置窗口布局

  10. SharkCTF2021 Classic_Crypto_king2

    crypto类题. 题面如下: 前面的代码给出了原理:后面的字符串第一行是print出的key,第二行是密文. 加密原理是,首先对table进行乱序处理,然后将明文flag按照(顺序table--&g ...