使用better-scroll 城市列表

vue实现城市列表选择

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

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

项目地址: https://github.com/caochangkui/vue-cli3 项目代码: 城市列表首页: City.vue <template> <div id="city">  <div class="word" v-show="

vue 城市列表与字母表联动

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

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

values 下dimens.xml <resources>  <dimen name="activity_horizontal_margin">16dp</dimen> <dimen name="activity_vertical_margin">16dp</dime

获取中央气象台API 完整城市列表简单方式

activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"

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

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

Android 国际区号注册手机号编码以及常用城市列表

附上国际区号编码:我是定义到arrays.xml里面了 <?xml version="1.0" encoding="utf-8"?> <resources> <string-array name="cities_data"> <item>中国大陆+</item> <item>香港+</item> <item>澳门+</item> <

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

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

Android 快速索引（城市列表和联系人）

最近需要实现一个城市列表的快速索引功能.类似于联系人应用,根据姓名首字母快速索引功能. 要实现这个功能只需要解决两个问题:1.对列表进行分组(具有同一特征),并且能够快速定位到该组的第一项 2.右侧分组‘特征’快速索引栏的实现第一个问题比较好解决,列表项可以根据相同的‘特征’来分组,比如说城市列表可以根据相同首字母的城市名来进行分组. 如何来定位到分组的第一项,只需要把分组的‘特征’和分组第一项下标关联起来,快速索引栏就能快速定位分组第一项第二个问题可以通过自定义控件来实现,实现的形式有很多,可

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

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

Vue2.5开发去哪儿网App 城市列表开发

一,城市选择页面路由配置 1. 在 router目录下的 index.js文件中,新增路由 import City from '@/pages/city/City' { path: '/city', name: 'City', component: City } 2. 在city

Vue2.5开发去哪儿网App 城市列表开发之 Vuex实现数据共享及高级使用

一,数据共享 1. 安装: npm install vuex --save 2. 在src目录下新建state文件夹,新建index.js文件 3. 创建一个 store import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { city: '上海' } }) 4.main.js中创建根实例时,传入store import store from '.

【微信小程序】手写索引选择器（城市列表，汽车品牌选择列表）

摘要: 小程序索引选择器,点击跳转相应条目,索引可滑动,滑动也可跳转场景:城市选择列表, 汽车品牌选择列表所用组件: 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

vue+node+mongoDB 火车票H5（六）---城市列表保存到MongoDB数据库并且启用node.js服务

把车站列表保存到数据库,并且从本地创建服务 node.js创建httpserver 1.搭建基于express的运行环境全局安装express-gengerator cnpm install -g express-gengerator 2.创建express项目,创建了本地服务 express server 生成server目录,目录下的bin是可执行文件,运行bin下的www文件启动服务 node server/bin/www 启动成功打开浏览器localhost:3000 server下的

发布 PM2.5 数据的城市列表

"三亚","三门峡","上海","东莞","东营","中山","临安","临汾","临沂","丹东","丽水","义乌","乌鲁木齐","九江","乳山","云浮","佛山&quo

【代码笔记】iOS-plist获得城市列表

一,工程图. 二,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. NSString* cityPlistPath = [[NSBundle mainBundle] pathForResource:@"cities" ofType:@"plist"]; //按照拼写排序,spel

iOS控件-3级城市列表-plist版

@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css); plist部分: 调用部分: - (void)textFieldDidBeginEditing:(UITextField *)textField { WJCityPikerView *piker = [[WJCityPikerView alloc]initWithMo

原生Js汉语拼音首字母匹配城市名/自动提示列表

根据城市的汉语名称首字母把城市排序,基本思路: 1.处理数据,按照需要的格式分别添加{HOT:{hot:[],ABCDEFG:{a:[1,2,3],b:[1,2,3]},HIGHLMN:{},OPQRSTU:{},VWXYZ:{}} 2.解析数据创建数据div 给需要功能的input分别添加事件效果预览:http://jsfiddle.net/dtdxrk/xdftL/embedded/result/ <!DOCTYPE html> <html> <head> &l

jquery手机触屏滑动拼音字母城市选择器代码

今天用到城市选择,直接用拼音滑动方式来选择,用的时候引入jquery(个别样式需要自己修改) <div class="yp_indz"><img src="images/dizhi.png" alt=""><em>北京</em></div>  <div class="dzhc_xs"> <nav> <di

zepto手机拼音字母城市选择器代码

<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-sc

使用better-scroll 城市列表

热门专题