componentDidMount() {
this.move();
}
skipToDep(e) {
let dom = document.getElementById(e); // 获取要跳至的字母节点
const scroller = this.props.scroller;
if (e === '#') {
scroller.scrollTo(0, 0);
} else {
if(-dom.offsetTop >= scroller.maxScrollY) {
scroller.scrollTo(0, -dom.offsetTop);
} else {
scroller.scrollTo(0, scroller.maxScrollY);
}
}
}
move() {
// 监听字母导航列表的touchmove事件
this.navigation.addEventListener('touchmove', e => {
const node = document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY); // 获取move时对应的节点
const reg = /^(#|[A-Z])/;
if(reg.test(node.innerText)) {
this.skipToDep(node.innerText);
}
});
}

字母导航跳转react核心代码的更多相关文章

  1. 我学React Native开发的经历(一) 第一周学习,环境搭建及demo1,一个导航跳转页面

    大家好,这是跋涉者,wadereye,说来惭愧, 我是从2017年8月25日左右开始学习React Native的,因为时间不多, 在学习的过程中,感觉资料非常零散,要趟过的坑巨多,遇到的问题也非常多 ...

  2. .NET核心代码保护策略

    .NET核心代码保护策略-隐藏核心程序集 经过之前那个道德指责风波过后也有一段时间没写博客了,当然不是我心怀内疚才这么久不写,纯粹是程序员的通病..怎一个懒字了得,本来想写一些长篇大论反讽一下那些道德 ...

  3. 学习Redux之分析Redux核心代码分析

    1. React,Flux简单介绍 学习React我们知道,React自带View和Controller库,因此,实现过程中不需要其他任何库,也可以独立开发应用.但是,随着应用程序规模的增大,其需要控 ...

  4. Android原生跳转React不同页面(undefined is not an object)

    继续上篇文章的demo,由于现在的项目是原生的,打算用部分页面试下react native,那么问题来了:react貌似只有一个入口 index.android.js,那么在不同的原生页面需要跳转到不 ...

  5. android启动第一个界面时即闪屏的核心代码(两种方式)

    闪屏,就是SplashScreen,也能够说是启动画面,就是启动的时候,闪(展示)一下,持续数秒后.自己主动关闭.  第一种方式: android的实现很easy,使用Handler对象的postDe ...

  6. 利用WxJava实现网站集成微信登录功能,核心代码竟然不超过10行

    最近网站PC端集成微信扫码登录,踩了不少坑,在此记录下实现过程和注意事项. 本文目录 一.微信开放平台操作步骤1.创建“网站应用”2.获取AppID和AppSecret二.开发指南三.开发实战1.po ...

  7. ListView 字母导航排序

    一.概述 ListView字母导航排序,网上已经有很多代码和博客了, 这篇博文也是照搬网上的.  之所以写到这里,不是为了说明什么,只是为了以后自己查阅方便.本来公司要求实现expandablelis ...

  8. Spring源码解析 - springMVC核心代码

    一.首先来讲解下springMVC的底层工作流程 1.首先我们重点放在前端控制器(DispatcherServlet) 其类图: 因为从流程图看,用户的请求最先到达就是DispatcherServle ...

  9. L1-064 估值一亿的AI核心代码 (20 分)

    L1-064 估值一亿的AI核心代码 (20 分)   以上图片来自新浪微博. 本题要求你实现一个稍微更值钱一点的 AI 英文问答程序,规则是: 无论用户说什么,首先把对方说的话在一行中原样打印出来: ...

随机推荐

  1. 关于 legend_noa

    真名:qlw 性别:男 常用ID:legend_noa(有时候也用fseject以表示我的弱, 曾经不懂事用goddess_Q),具体意思是我最喜欢的两个奥特曼:诺亚和雷杰多 p1 诺亚,p2 雷杰多 ...

  2. Ubuntu系统安装Transmission

    虚拟机Ubuntu 16.10 Transmission 2.92(https://launchpad.net/~transmissionbt/+archive/ubuntu/ppa) 一.添加源 s ...

  3. Hot Chocolate 一个.net 平台的graphql 框架

    在看昨天发布的新版技术雷达中,看到了一个.net 的graphql 框架Hot Chocolate 还是比较激动,尽管好久不搞 .net 了,但是这个框架还是值得看看的,后边学习下 参考资料 http ...

  4. Java 内部类的作用

    1.内部类可以很好的实现隐藏 一般的非内部类,是不允许有 private 与protected权限的,但内部类可以 2.内部类拥有外围类的所有元素的访问权限 3.可是实现多重继承 4.可以避免修改接口 ...

  5. 使用composer遇到的坑

    平台:Windows下cmd命令行內 問題 [Composer\Downloader\TransportException] The "https://packagist.phpcompos ...

  6. VLC播放器

    为了将多个视频放在一个窗口,最开始想用的是windows media player ,6个视频,把整个电脑卡得不动了(显卡太弱,是多输出口的,没法换),于是又想把视频压缩成一个,网上的大部分软件要收费 ...

  7. Redis入门的简单使用

    Redis是什么? redis是一个开源的,面向键/值对的NOSQL的分布式数据库系统 NOSQL指的是非关系型的数据,简单直白地讲就是在非关系型的数据库中不存在表的概念,而是以键值对的方式, 即一个 ...

  8. DDS生成正弦波

    DDS生成正弦波 `timescale 1ns / 1ps ////////////////////////////////////////////////////////////////////// ...

  9. 查看局域网内所有IP的方法

    1,windows下查看局域网内所有IP的方法: 在MS-DOS命令行输入arp -a 2,Linux下,查看局域网内所有IP的方法: 在命令行输入nmap -sP 172.10.3.0/24

  10. spring使用注解通过子类注入父类的私有变量

    方法一 通过 super.setBaseDao方法设置父类私有变量 父类 public class BaseServiceImpl {    private BaseDao baseDao; publ ...