Vue实现类似通讯录功能(下)

字母索引滚动监听

修改字母索引组件,绑定三个touch事件,分别是touchStarttouchMovetouchEnd

定义三个touch事件

只有当touchstart之后,才执行touchmove里的内容,所以在data里定义一个标识位touchStatus,默认值为false
当手指触摸的时候,标识位的值为true,结束滑动的时候,标识位的值为false。只有当标识位的值为true的时候,才去执行move事件的处理。

然后要做的一件事就是,当我们在字母索引处上下滑动的时候,现在所在的位置是第几个字母。

主要是思路是:
1.获得A字母距离顶部的高度
2.滑动的时候看下当前手指位置距离顶部的高度
3.前两个做一个差值,算出当前手指位置和A字母顶部的差值,
然后除以每个字母的高度,就能算出当前是第几个字母了
4.然后取这个字母触发change事件给外部

如果想根据下标,找到下标对应的字母的话,首先得有个数组存储字母的列表。但是现在cities是个对象,并不是个数组,所以我们需要一个数组。
computed计算属性中定义一个letters

构建letters

这样就构建出了一个名字叫做letters的计算属性,它的内容大概是这样的['A', 'B', 'C', 'D',...],返回的结果就是这样的数组。
有了这个数组,之前字母索引处的循环也可以相应的改一下,之前是做cities对象的循环。现在可以直接根据这个数组循环。
修改了一下下

获取A字母距离顶部的高度

首先绑定一下dom元素:

获取dom元素

然后在move的时候,如果此时touchStatus为·true·,开始执行以下代码,定义一个startY,A字母的顶部高度是它的offsetTop,那么就这样写this.$refs['A'][0].offsetTopthis.$refs['A']是个数组,必须取下标0才能拿到它的dom元素,)
获取A字母距离红色区域下沿的高度

我是浏览器测试图:


我是浏览器测试图

此时在索引处拖动的时候,控制台不停的打印一个值,这个值就是A字母顶部距离红色区域最下沿的高度(红色区域是指的搜索框)。

我是示意图


获取当前手指距离顶部的高度并做差值

计算手指的位置

touch事件有个参数e,事件对象里 它会有一个touches的数组,第0项表示的是手指的信息,这里获取到手指的clientY的值。
为啥这里是clientY?为啥不和上面的一样是offsetTop
让我们走进e.touches
image.png

这里可以看到e.touches里这么一些属性。

####这里是百度的touch事件的科普
在移动端页面开发时,常常会用到touch事件,
比如左滑右滑的轮播等。常用的触摸事件有touchstart,touchmove,touchend。

每个事件包含下面三个用于跟踪虎摸的属性:
  touches:表示当前跟踪的触摸操作的touch对象的数组。
  targetTouches:特定于事件目标的Touch对象的数组。
  changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。

 每个touch事件包含下面的属性:
  clientX:触摸目标在视口中的x坐标。
  clientY:触摸目标在视口中的y坐标。
  identifier:标识触摸的唯一ID。
  pageX:触摸目标在页面中的x坐标。
  pageY:触摸目标在页面中的y坐标。
  screenX:触摸目标在屏幕中的x坐标。
  screenY:触摸目标在屏幕中的y坐标。
  target:触摸的DOM节点目标。

打印一波

打印一下这3个Y的值,clientYpageY在这里是相等的,但是screenY与它们不同,保险起见,这里最好用的是clientY
clientY被分割了

clientY的距离是这样的,所以如果想算出手指距离红色区域最下沿的高度,得用这个clientY - 红色区域的高度(一个搜索框+标题栏部分),这部分的高度在我这里是160。
所以才有const touchY = e.touches[0].clientY - 160

算出是第几个字母

得到这部分高度之后,用这部分高度 - 第一步得到的 高度,算差值。这个差值是当前手指的高度 到 A字母的高度,然后用这个差值 除以 每个字母的高度,我这里每个字母的高度是 40,所以有下图:

算出是第几个字母

记得用Math.floor向下取个整啊,得到字母的下标索引

取这个字母触发change事件给外部

取这个字母向外派发事件

当索引在0 到 字母数组的长度之间时,派发change事件。
一定要加这个条件!不然index的值可能会有问题,亲测!因为滑动右侧索引的时候,整个索引是到底部的,但是底部并没有字母了,此时得到的索引值超过了26(26个英文字母)
给父组件派发的change事件所带的内容是字母A、B、C,
this.letters[index]获取到的是letters字母数组内下标为index的内容。

到这里为止!!!列表和索引的监听终于做完啦~~~


放张完成图
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,723评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,003评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,512评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,825评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,874评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,841评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,812评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,582评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,033评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,309评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,450评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,158评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,789评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,409评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,609评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,440评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,357评论 2 352

推荐阅读更多精彩内容

  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,118评论 0 21
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,887评论 0 0
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,231评论 0 4
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,649评论 18 139
  • 大家现在好,我是耐心,今天去医院检查了,第一次用医保以失败而告终,发现之前让人力改的定点医院并没有修改过来,...
    心羽暖姐姐阅读 215评论 0 0