实现两个联动

一是点击右侧字母的时候,城市列表出现相应首字母下的城市

二是鼠标在字母表上滑动的时候,城市列表实时跟着变化

一.点击字母出现相应的列表,给每个字母设置handleLetterClick事件

  1. <template>
  2.     <div>
  3.        <ul class="list">
  4.            <li class="item"
  5.             v-for="item of letters"
  6.             :key="item"
  7.              @click="handleLetterClick"
  8.              @touchstart="handleTouchStart"
  9.              @touchmove="handleTouchMove"
  10.              @touchend="handleTouchEnd"
  11.              :ref="item"
  12.              >
  13.              {{item}}
  14.              </li>
  15.        </ul>
  16.     </div>
  17. </template>

获取当前点击的字母,传给父组件city,再由city组件传给城市列表list组件,再根据字母滚动到相应的内容

  1. <city-alphabet :cities="cities" @change="handleLetterChange"></city-alphabet>
  2. handleLetterChange(letter){
  3.               this.letter=letter
  4.           }

城市列表list组件获取到父组件传过来的letter,并监听letter的变化

  1. props:{
  2.            hot:Array,
  3.            cities:Object,
  4.            letter:String
  5.        },
  6.  watch:{
  7.          //监听letter,当letter发生变化时触发
  8.          letter(){
  9.             if(this.letter){
  10.                 const element=this.$refs[this.letter][0]
  11.                 this.scroll.scrollToElement(element)
  12.             }
  13.          }
  14.        }

二.当鼠标滑动的时候,城市列表实时地发生变化

实现原理:其实和点击的时候一样,当鼠标滑动时,实时地获取滑动的时候所经过的字母,再把字母传给城市列表list组件,再跳转到相应的元素

((鼠标距顶部的距离一79)一A字母距父元素的距离)/每个字母的高度20 计算此时鼠标所在的第几个字母

  1. <template>
  2.     <div>
  3.        <ul class="list">
  4.            <li class="item"
  5.             v-for="item of letters"
  6.             :key="item"
  7.              @click="handleLetterClick"
  8.              @touchstart="handleTouchStart"
  9.              @touchmove="handleTouchMove"
  10.              @touchend="handleTouchEnd"
  11.              :ref="item"
  12.              >
  13.              {{item}}
  14.              </li>
  15.        </ul>
  16.     </div>
  17. </template>
  18.  
  19. <script>
  20.     export default {
  21.         name:"CityAlphabet",
  22.         data (){
  23.             return{
  24.                 touchStatus:false,
  25.                 startY:0,
  26.                 //函数截流,提高性能
  27.                 timer:null
  28.             }
  29.         },
  30.         updated(){
  31.             //A字母元素到父元素顶部的距离
  32.            this.startY=this.$refs["A"][0].offsetTop
  33.  
  34.         },
  35.         props:{
  36.             cities:Object
  37.         },
  38.          computed: {
  39.             letters () {
  40.             const letters = []
  41.             for (let i in this.cities) {
  42.                 letters.push(i)
  43.             }
  44.             return letters
  45.             }
  46.         },
  47.         methods:{
  48.             handleLetterClick(e){
  49.                //把字母传给父亲,父亲再给List
  50.                //e.target.innerText获取里边的内容
  51.                this.$emit('change',e.target.innerText)
  52.             },
  53.             handleTouchStart(){
  54.                 this.touchStatus=true
  55.             },
  56.             handleTouchMove(e){
  57.                 if(this.touchStatus){
  58.                    if(this.timer){
  59.                        clearTimeout(this.timer)
  60.                    }
  61.                    this.timer=setTimeout(() => {
  62.                        //touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。
  63.    //touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。
  64.   //touchend事件:当手指从屏幕上离开的时候触发。
  65.                        //touches:表示当前跟踪的触摸操作的touch对象的数组。
  66.                        //clientY:触摸目标在视口中的y坐标。
  67.                        //79是绿色底部到顶部的距离
  68.                        const touchY=e.touches[0].clientY-79
  69.                        //每个字母的高度是20
  70.                        const index=Math.floor((touchY-this.startY) / 20)
  71.                        console.log(touchY)
  72.                         if(index >= 0&&index < this.letters.length){
  73.                             this.$emit('change',this.letters[index])
  74.                         }
  75.                    }, 16);
  76.  
  77.                 }
  78.             },
  79.             handleTouchEnd(){
  80.                 this.touchStatus=false
  81.             }
  82.         }
  83.  
  84.     }
  85. </script>

vue 城市列表与字母表联动的更多相关文章

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

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

  2. vue实现城市列表选择

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

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

    为了提高客户体验和进行一些技术探索,现在正准备把我自己的客户关系管理系统CRM在做一个Web的版本,因此对基于MVC的Web界面继续进行一些研究和优化,力求在功能和界面上保持和Winform一致,本文 ...

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

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

  5. 用vue实现省市县三级联动

    我真的没想到这个会困扰到我.最开始以为,不就是直接找个简单的插件就实现了吗,jquery插件找了几个,都没有达到目的. 需求是这样的: 点击input框,弹出一个popup,然后可以滚动选择省,市,县 ...

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

    vue移动端地区三级联动 省,市,县.用的vue+mintUi 因为多级联动以及地区的规则比较多.正好有时间自己写了一个.有问题以及建议欢迎指出.涉及到dom移动,所以依赖vue+jquery.这边数 ...

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

    http://www.cnblogs.com/wuhuacong/p/3841338.html 为了提高客户体验和进行一些技术探索,现在正准备把我自己的客户关系管理系统CRM在做一个Web的版本,因此 ...

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

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

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

    activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android& ...

随机推荐

  1. Vim Plugins for Linux

    Usage 1.Set up Vundle: git clone https://github.com/VundleVim/Vundle.vim.git ~/.vim/bundle/Vundle.vi ...

  2. springboot 启动的java进程默默终止

    首先说明这是一个灵异事件......... 场景1 :把之前用map实现的缓存用Redis重构,高高兴兴上线更新,10 分钟后,老板告诉我,项目停了,what ??? 像我这么帅气,英俊,聪明的人,更 ...

  3. python3 FTP简单实现文件下载(含中文乱码问题)

    from ftplib import FTP def ftp_down(HOST,romatepath,filename,localpath): user=***** password=***** f ...

  4. 性能测试工具Jmeter11-Jmeter图形监控扩展

    插件下载地址:http://jmeter-plugins.org/downloads/all/ 1.首先将JmeterPluging.jar包复制到Jmeter的Lib目录下面的ext目录下面,然后重 ...

  5. Bootsrap Table表格分页

    一 bootsrap简介 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加 ...

  6. 实现Web层的日志切面(方便清晰查看日志)

      import org.aspectj.lang.JoinPoint; import org.aspectj.lang.Signature; import org.aspectj.lang.anno ...

  7. DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理

    推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一 ...

  8. 温习SQL语句

    作为一名使用C#语言开发人员,就很难逃脱与SQLSERVER打交道,虽说我们是开发人员,但我想说的是,对数据库的操作还是应该时不时的拿出来温习一番.下面那就是我见过的一道有趣的SQL题目,与你们一起分 ...

  9. JavaScript 原型链 OOP(二)

    原型对象 `prototype` -  原型对象的所有属性和方法,都能被实例对象共享;   JavaScript 通过构造函数生成新对象,因此构造函数可以视为对象的模板.实例对象的属性和方法,可以定义 ...

  10. 浅谈python的深浅拷贝

    python中有两种数据类型:一种是可变数据类型,一种是不可变数据类型 不可变数据类型包括(整型及其他数据类型,字符串及元组) 可变数据类型(列表,集合,字典,类和类实例) 鉴定是否为拷贝还是只是引用 ...