本插件由博主自主开发,比uni插件市场的城市列表滑动组件性能好,且不会出现闪屏的情况. 通过计算城市列表的高度实现滚动到指定位置,使用了uni滚动到指定位置的api city-chooce为页面入口页,引入文件路径需要自己更改 citySelect.js文件为拼音检索 目前是没有引入使用 有需要使用自取 链接:https://pan.baidu.com/s/1yBO0dqhfmXzITmWrMRI0ng 提取码:z05u 其他需求也可以自己添加,如有不懂的或者需要二级市下面的区县数据请+博主Q…

选中某一行后想要tableView自动滚动使得选中行始终处于table的top.middle或者bottom,使用以下方法中的一个就可以实现: [tableView scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionBottom animated:YES]; //    [tableView scrollToNearestSelectedRowAtScrollPosition:UITableVie…

不说废话,上效果图 因为我有多处要用到,所以我这里是写成自定义组件的,你也可以直接改成在page页面编写: 布局左边一个scroll-view,显示城市列表,右边一个view显示字母列表,城市列表这边有首字母显示,给这个添加这个字母的ID,然后给右边的26个字母添加点击事件,点击的时候获取到点击的是哪个字母,给scroll-view的scroll-into-view赋值相应的字母,它左边就可以跳到相应的地方,再给scroll-view 加一个scroll-with-animation,让它跳转的…

实现两个联动 一是点击右侧字母的时候,城市列表出现相应首字母下的城市 二是鼠标在字母表上滑动的时候,城市列表实时跟着变化 一．点击字母出现相应的列表,给每个字母设置handleLetterClick事件 <template>     <div>        <ul class="list">            <li class="item"             v-for="item of letter…

项目地址: https://github.com/caochangkui/vue-cli3 项目代码: 城市列表首页: City.vue <template> <div id="city"> <!-- <img src="/logo.png" alt="" height="10px"> --> <div class="word" v-show="…

一,  兄弟组件间联动 1.  点击城市字母,左侧对应显示 给遍历的 字母 添加一个点击事件: Alphabet.vue @click="handleLetterClick" handleLetterClick (e) { //获取对应的字母 this.$emit('change', e.target.innerHTML) } 在 父组件City.vue 中,监听 <city-alphabet :cities="cities" @change="ha…

values 下dimens.xml <resources> <!-- Default screen margins, per the Android Design guidelines. --> <dimen name="activity_horizontal_margin">16dp</dimen> <dimen name="activity_vertical_margin">16dp</dime…

成果展示 最后的成果就是下面所展示的内容,因为gif图没有做,只能截图所展示,接下来,会带着大家一步一步的完成下面功能,脚手架搭建和node安装在本次案例不会讲解,如果了解,可以在我的博客园找到有详细介绍 准备工作: 引入axios插件,调用better-scroll第三方插件,本地json文件,可以参考目录中的city.json,有条件的也可以自己去扒 功能分析 1.获取json数据展示城市列表 . 2.侧边字母定位滚动到相应的位置. 3.实现搜索城市 接下来我们开始对组件进行划分:本次案例中…

摘要: 小程序索引选择器,点击跳转相应条目,索引可滑动,滑动也可跳转 场景:城市选择列表, 汽车品牌选择列表 所用组件: scroll-view(小程序原生) https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html 所用API: wx.getSystemInfo     https://developers.weixin.qq.com/miniprogram/dev/api/base/system/s…

全国城市列表选择 (包含定位城市.热门城市.全国城市) 用ScrollView 实现,解决 SectionList 实现的卡顿问题 实现效果如图: 代码实现如图: 主逻辑文件 cityList.js 'use strict'; import React, {Component} from "react" import {Dimensions, ScrollView, StyleSheet, Text, TouchableOpacity, View} from 'react-native…