字母导航跳转react核心代码
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核心代码的更多相关文章
- 我学React Native开发的经历(一)  第一周学习,环境搭建及demo1,一个导航跳转页面
		
大家好,这是跋涉者,wadereye,说来惭愧, 我是从2017年8月25日左右开始学习React Native的,因为时间不多, 在学习的过程中,感觉资料非常零散,要趟过的坑巨多,遇到的问题也非常多 ...
 - .NET核心代码保护策略
		
.NET核心代码保护策略-隐藏核心程序集 经过之前那个道德指责风波过后也有一段时间没写博客了,当然不是我心怀内疚才这么久不写,纯粹是程序员的通病..怎一个懒字了得,本来想写一些长篇大论反讽一下那些道德 ...
 - 学习Redux之分析Redux核心代码分析
		
1. React,Flux简单介绍 学习React我们知道,React自带View和Controller库,因此,实现过程中不需要其他任何库,也可以独立开发应用.但是,随着应用程序规模的增大,其需要控 ...
 - Android原生跳转React不同页面(undefined is not an object)
		
继续上篇文章的demo,由于现在的项目是原生的,打算用部分页面试下react native,那么问题来了:react貌似只有一个入口 index.android.js,那么在不同的原生页面需要跳转到不 ...
 - android启动第一个界面时即闪屏的核心代码(两种方式)
		
闪屏,就是SplashScreen,也能够说是启动画面,就是启动的时候,闪(展示)一下,持续数秒后.自己主动关闭. 第一种方式: android的实现很easy,使用Handler对象的postDe ...
 - 利用WxJava实现网站集成微信登录功能,核心代码竟然不超过10行
		
最近网站PC端集成微信扫码登录,踩了不少坑,在此记录下实现过程和注意事项. 本文目录 一.微信开放平台操作步骤1.创建“网站应用”2.获取AppID和AppSecret二.开发指南三.开发实战1.po ...
 - ListView 字母导航排序
		
一.概述 ListView字母导航排序,网上已经有很多代码和博客了, 这篇博文也是照搬网上的. 之所以写到这里,不是为了说明什么,只是为了以后自己查阅方便.本来公司要求实现expandablelis ...
 - Spring源码解析 - springMVC核心代码
		
一.首先来讲解下springMVC的底层工作流程 1.首先我们重点放在前端控制器(DispatcherServlet) 其类图: 因为从流程图看,用户的请求最先到达就是DispatcherServle ...
 - L1-064 估值一亿的AI核心代码 (20 分)
		
L1-064 估值一亿的AI核心代码 (20 分) 以上图片来自新浪微博. 本题要求你实现一个稍微更值钱一点的 AI 英文问答程序,规则是: 无论用户说什么,首先把对方说的话在一行中原样打印出来: ...
 
随机推荐
- JavaList列表的一些方法
			
import java.util.ArrayList;import java.util.Iterator;import java.util.List; public class Test1 { pub ...
 - Java(原码、反码、补码和计算机存储格式)
			
原码:将一个整数,转换成二进制,就是其原码.如单字节的5的原码为:0000 0101:-5的原码为1000 0101. 反码:正数的反码就是其原码:负数的反码是将原码中,除符号位以外,每一位取反.如单 ...
 - Flagr 配置说明
			
说明文档来自官方文档 https://checkr.github.io/flagr/#/flagr_env 完整配置 包含了组件的配置参数以及说明,对于学习如何使用Flagr 还是很重要的,包含了数据 ...
 - sql 用过记住
			
1 递归查询一个节点下的所有子节点 包括该节点 connect by h.parent_menu_id= prior h.menu_idstart with h.menu_id='当前节点' h.pa ...
 - zabbix3.4使用外部邮件报警
			
打开web页面,找到 管理--报警媒介类型 打开 Email 填写外部邮箱信息 点击更新,这样发件人和邮箱服务器信息定义完成. 添加收件人信息: 接下来创建动作,配置---动作---选触发器 ok 过 ...
 - IIS7 伪静态 web.config 配置方法
			
<rule name="Redirect" stopProcessing="true"> <match url=".*" ...
 - HashTable & HashMap & ConcurrentHashMap 原理与区别
			
一.三者的区别 HashTable HashMap ConcurrentHashMap 底层数据结构 数组+链表 数组+链表 数组+链表 key可为空 否 是 否 value可为空 否 是 否 ...
 - java.lang.IllegalArgumentException: No enum constant org.apache.ws.commons.schema.XmlSchemaForm.
			
一次系统断电维护之后,apache cxf 的 web service 接口调用一直报错: java.lang.IllegalArgumentException: No enum constant o ...
 - C++指针速记
			
基本原则:指针类型变量存储的就是地址! 1.数组名就是数组首元素的地址** int age[3]; int* p = age; 2.使用new操作符实际上是向操作系统申请一块内存(包含类型信息),返回 ...
 - 弹框时(如大于body的高度),锁死body,使其不能滚动
			
if(flag){ document.body.style.height = '100vh' document.body.style['overflow-y'] = 'hidden' }else{ d ...