本插件由博主自主开发，比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. 集群环境下的Session管理

    1. 集群环境下的管理HTTPSSession所遇到的问题 一台服务器对应这个一个session对象,无法在另外一个服务器互通 解决方法: 1. Session 的 Replication(复制)将当 ...

  2. 在modal中的datetimepicker插件BUG修复

    前言:因为在模态框用到datetimepicker这一日期控件,而选中日期时,会触发模态框的再次打开,导致上面表单选的值会重新加载 解决办法: 用stopPropagation() 方法阻止事件传播, ...

  3. 常见JS

    1.获取当前月份第一天 var date = new Date(); var year = date.getFullYear(); var month = date.getMonth() + 1; v ...

  4. IE浏览器设置兼容性

    因为IE浏览器不兼容高版本的Jquery.Bootstrap等JS框架,导致页面在Google浏览器和在IE的显示完全不一样,所以需要对页面进行兼容性设置 <!--设置兼容性--> < ...

  5. 【vue】两个页面间传参 - props

    目录 Step1 设置可以 props 传递数据 Step2 跳转前页面中传递数据 Step3 跳转后的页面接收数据 从 A 页面跳转到 B 页面, 参数/数据通过 props 传递到 B 页面,这种 ...

  6. Node.js Koa框架学习笔记

    Koa 基本介绍 Koa是Node.js中非常出名的一款WEB框架,其特点是短小精悍性能强. 它由Express原版人马打造,同时也是Egg框架的设计蓝图,可以说Koa框架的学习性价比是非常高的. 官 ...

  7. eclipse下载安装

    1.下载 网址:https://www.eclipse.org/downloads/ 找到:eclipse-inst-jre-win64.exe 下载... 2.安装 找到-->Eclipse ...

  8. FastAPI（59）- 详解使用 OAuth2PasswordBearer + JWT 认证

    JWT JSON Web Tokens 它是一个将 JSON 对象编码为密集且没有空格的长字符串的标准 使用 JWT token 和安全密码 hash 使应用程序真正安全 JWT 小栗子 eyJhbG ...

  9. 我惊了！CompletableFuture居然有性能问题！

    你好呀,我是歪歪. 国庆的时候闲来无事,就随手写了一点之前说的比赛的代码,目标就是保住前 100 混个大赛的文化衫就行了. 现在还混在前 50 的队伍里面,稳的一比. 其实我觉得大家做柔性负载均衡那题 ...

  10. 11.2.0.4 RAC manual opatch

    1.Stop the CRS managed resources running from DB homes. If this is a GI Home environment, as the dat ...