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. zabbix监测图形界面显示方框乱码解决方法

    思路如下:用Windows下中文字体进行替换,修改配置文件即可 详细步骤如下: 1.在Windows的控制面板里的字体中,选择一种中文字体,将该字体文件复制到桌面.例如,我选择了宋体 常规字体,复制到 ...

  2. 提交代码,SVN被锁定,提示:svn is already locked解决方案

    今天遇到一个问题,svn 在提交代码的时候出现了svn is already locked,这是什么鬼,svn 没少用,但是这种情况,还是第一次遇到,于是,百度一下,查了一下,做一下个人分享. 遇到这 ...

  3. ubuntu 安装kafka

    下载 wget http://mirrors.hust.edu.cn/apache/kafka/2.0.0/kafka_2.12-2.0.0.tgz 解压 tar -zxf kafka_2.12-2. ...

  4. adb截图机顶盒

    操作命令如下 1.adb connect 192.168.1.14(连接电视) 2.adb shell /system/bin/screencap -p /data/1.png(截图并命名并存储) 3 ...

  5. WAMP中mysql服务突然无法启动 解决方法

    wamp的mysql服务前两天还能用,今天突然不能无法启动了,原因可能是近期电脑强行关机,删除wamp\bin\mysql\mysql5.6.17\data目录下的ib_logfile0和ib_log ...

  6. pymsql简单的使用

    不废话直接上代码: import pymysql class MysqlConnection: ''' 单例模式获取数据库链接实例 ''' _instance = None def __new__(c ...

  7. ES - Index Templates 全局index模板

    1.Index Templates 之前我们聊过Dynamic template,它作用范围是特定的Index,如果我们想针对全局Index进行设置该如何操作呢? Index Templates 可以 ...

  8. JAVA Override和Overload的含义去区别

    java中的继承,方法覆盖(重写)override与方法的重载overload的区别 1.方法的重写(Overriding)和重载(Overloading)是Java多态性的不同表现,重写(Overr ...

  9. jmeter问题

    1.使用jmeter传入json参数报错 具体场景:使用python+request执行接口测试,正常:把python的参数直接复制,使用jmeter执行接口测试,提示json格式错误. {...,& ...

  10. note 12 集合Set

    集合Set +无序不重复元素(键)集 +和字典类似,但是无"值" 创建 x = set() x = {key1,key2,...} 添加和删除 x.add('body') x.re ...