vue 城市列表与字母表联动

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

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

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

vue实现城市列表选择

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

基于MVC4+EasyUI的Web开发框架经验总结（7）--实现省份、城市、行政区三者联动

为了提高客户体验和进行一些技术探索,现在正准备把我自己的客户关系管理系统CRM在做一个Web的版本,因此对基于MVC的Web界面继续进行一些研究和优化,力求在功能和界面上保持和Winform一致,本文主要介绍在我的CRM系统中用到的全国省份.城市.行政区三者的两种效果,在Winform上实现没问题,在Web上基于MVC的EasyUI实现,同样也没有问题. 1.Winform上省份.城市.行政区的联动效果在很早的时候,我在Winform框架的一篇随笔<Winform开发框架之字典管理模块的更新,…

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

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

用vue实现省市县三级联动

我真的没想到这个会困扰到我.最开始以为,不就是直接找个简单的插件就实现了吗,jquery插件找了几个,都没有达到目的. 需求是这样的: 点击input框,弹出一个popup,然后可以滚动选择省,市,县.他们三者是联动的,同时也可以只选择省,或者省市,或者省市县.就是这个需求,感觉有点为难到我了.也可能是昨天感冒了,一天头都晕,又开各种会各种培训..哈哈哈,不扯了... 数据哪里来?去下载一个“省份.城市.区县”三级联动的数据. 考虑到滚动选择这个需求,我们用饿了么推出的mint-ui里面的mt-…

vue移动端地址三级联动组件(一)

vue移动端地区三级联动省,市,县.用的vue+mintUi 因为多级联动以及地区的规则比较多.正好有时间自己写了一个.有问题以及建议欢迎指出.涉及到dom移动,所以依赖vue+jquery.这边数据是后端请求的.我只简单写了三个mock数据.(二)中简单写一下展示以及父级组件. city.vue 子组件: html: <template> <div id="city" v-if="showModel"> <div class=&qu…

（转）基于MVC4+EasyUI的Web开发框架经验总结（7）--实现省份、城市、行政区三者联动

http://www.cnblogs.com/wuhuacong/p/3841338.html 为了提高客户体验和进行一些技术探索,现在正准备把我自己的客户关系管理系统CRM在做一个Web的版本,因此对基于MVC的Web界面继续进行一些研究和优化,力求在功能和界面上保持和Winform一致,本文主要介绍在我的CRM系统中用到的全国省份.城市.行政区三者的两种效果,在Winform上实现没问题,在Web上基于MVC的EasyUI实现,同样也没有问题. 1.Winform上省份.城市.行政区的联动效…

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,让它跳转的…

基于Jquery实现省份、城市、区县三级联动

前端感觉写的比较少,也是为了练手,下午没事用来写了这个三级联动,也是第一次写这东西. 据我了解,城市信息可以选择存在数据库或者直接写在前端,为了省事,我直接写在前端,下面是我的代码: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”“http://www.w3.org/TR/html4/loose.dtd”><html><head><title></title><s…

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…

Ajax案例-基于XML，以POST方式，完成省份-城市二级下拉联动

<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>基于XML,以POST方式,完成省份-城市二级下拉联动</title> <script type=&quo…

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

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

Vue 基本列表 && 数据过滤与排序

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Vue 基本列表</title> 6 <script type="text/javascript" src="../js/vue.js"></script> 7 </head> 8 <body…

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下的…

vue城市三级联动组件 vue-area-linkage

Install the pkg with npm: // v5之前的版本 npm i --save vue-area-linkage // v5及之后的版本 npm i --save vue-area-linkage area-data 目前基本都是5之后的了 main.js中 import VueAreaLinkage from 'vue-area-linkage'; Vue.use(VueAreaLinkage) 组件中 import {pca, pcaa} from 'area-data'…