实现两个联动

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

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

一.点击字母出现相应的列表,给每个字母设置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. UI3D转2D平面显示UI3DTo2D血条显示

    UI3D转2D平面显示UI3DTo2D血条显示: using UnityEngine; using System.Collections; public class UI3DTo2D : MonoBe ...

  2. Java实现中文词频统计

    昨日有个中文词频统计的需求, 百度一番后, 发现一大堆标题党文章, 讲的与内容严重不符, 这里就简单记录下自己实现的流程吧! 与英文单词的词频统计不同, 中文的难点在于如何分词, 不过好在有许多优秀的 ...

  3. easyui combobox with checkbox item

    $('#cc').combobox({ url:'combobox_data1.json', method:'get', valueField:'id', textField:'text', pane ...

  4. iOS 8 提供 TestFlight 方便开发者测试软件 (转)

    原文地址:http://tech2ipo.com/66893 TestFlight / via iMore 作者: Nick Arnott   译者:翛凌 原文:iMore  iOS 应用程序的测试对 ...

  5. Sass基础(二)

    五.嵌套 在Sass中,嵌套有三种方式:选择器嵌套.属性嵌套.伪类嵌套 1.选择器嵌套 2.属性嵌套 3.伪类嵌套 六.混合宏 当样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无法达到目的了 ...

  6. Js仿腾讯微博效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. Errors while uninstall the reporting extensions

    "Microsoft.crm.setup.Srsdataconnector UnregisterServer Action操作失败:Requested value 'geo' was not ...

  8. Gradle 教程:第二部分,JAVA PROJECTS【翻译】

    原文地址:http://rominirani.com/2014/07/28/gradle-tutorial-part-2-java-projects/ 在这部分的教学中,我们会学习如何使用Gradle ...

  9. TeamViewer安装使用

    1.下载安装包 官网下载最新安装包 2.安装步骤 3.连接 输入密码即可控制伙伴电脑.

  10. appium (三)执行过程

      转自http://blog.csdn.net/Yejianyun1/article/details/56012470 appium界面运行过程: 1.启动一个http服务器:127.0.0.1:4 ...