字母导航跳转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 英文问答程序,规则是: 无论用户说什么,首先把对方说的话在一行中原样打印出来: ...
随机推荐
- Django Admin初识
一.网站后台的作用 网站后台通常是相对于动态网站而言,即网站建设是基于数据库驱动的网站.网站后台,有时也称为网站管理后台,是指用于管理网站前台的一些列操作,如:产品.企业 信息的增加.更新.删除等.通 ...
- CS萌新的汇编学习之路02 Learning of Assembly Language
第二节课 寄存器 1. 寄存器的定义: 进行信息储存的器件,是CPU中程序员可以读写的部件,通过改变各种寄存器中的内容来实现对CPU的控制 2. 寄存器的种类: 本节课学习通用寄存器和段寄存器 2. ...
- day02格式化输出等
1.格式化输出 format % 占位符 %s:str, %d: dight, %f: float 字符串多行用三个单引号或三个双引号 %%5,百分之五,转义字符%.想 ...
- Day 20 常用模块(三)
一.加密模块 1.加密方式: 1.有解密的加密方式 2.无解密的加密方式,碰撞检查 1.不同数据加密后的结果一定不一致 2.相同数据的加密结果一定是一致 2.hashlib模块 1.基本使用 ciph ...
- Unity 3D入门简介
最近在刚开始学习Unity 3D,在这里记录一下学习心得和学习笔记,边学边写,可能会比较零散.好了,废话不多说,今天从Unity 3D入门写起,主要简要介绍一下Unity 3D的和一些学习资料.以下如 ...
- django 防止xss攻击标记为安全的二种方法
str='<a href="/page?page=1">1</a>' 一,在前端模板语言中实现,只须用到帮助函数safe.如: {{ str|safe }} ...
- 辨析字节序(Endianness)
字节序(Endianness, Byte Order)指的是对于一个多字节数值,当在内存中存储该值或者在链路中传输该值时,其值所包含的多个字节的排列顺序. 在计算机科学中,一般存在两种字节序,大端字节 ...
- POI 生成、导出Excel(包含多个sheet)带 图片
1.导入依赖 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</ar ...
- 平安技术开放日质量保证技术专场第一期 [附部分 ppt]
4月8号在上海平安大厦,平安证券和Tester联合举办了一场质量保证技术专场,附上部分PPT 平安技术开放日介绍 ppt下载 A/B测试的大数据架构实践 链接: http://pan.baidu. ...
- Kong(v1.0.2)代理参考
介绍 在本文中,我们将通过详细解释Kong的路由功能和内部工作原理来介绍它的代理功能. Kong公开了几个接口,可以通过两个配置属性进行调整: proxy_listen,它定义了一个地址/端口列表,K ...