字母导航跳转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 英文问答程序,规则是: 无论用户说什么,首先把对方说的话在一行中原样打印出来: ...
随机推荐
- Educational Codeforces Round 54 (Rated for Div. 2) D:Edge Deletion
题目链接:http://codeforces.com/contest/1076/problem/D 题意:给一个n个点,m条边的无向图.要求保留最多k条边,使得其他点到1点的最短路剩余最多. 思路:当 ...
- 矩形覆盖(JAVA)
矩形覆盖 题目描述 我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形.请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? 思路:最初看到这题,只能通过画图归纳来寻找规律. ...
- Django学习笔记之安全
CSRF攻击 CSRF攻击概述 CSRF(Cross Site Request Forgery, 跨站域请求伪造)是一种网络的攻击方式,它在 2007 年曾被列为互联网 20 大安全隐患之一.其他安全 ...
- day03 文件操作
目录 1.文件操作实例 2.文件常用操作 3.with模块操作文件 常用实例,把文件里面的内容读出来做成字典的形式在做成字列表展示. 1.精简版. lst = []f = open("fil ...
- opcache 参数说明 --转自https://www.cnblogs.com/tudou1223/p/5362785.html
PHP的opcode缓存又出了新成员(说新不新,也有一段日子了),那就是opcache.新浪微博等都在使用,惠新宸老师强力推荐.本人最近根据官网地址(http://www.php.net/manual ...
- vue-cli环境配置
1.安装npm 从node.js官网下载并安装node node -v 命令,查看node的版本,若出现相应的版本号,则说明你安装成功了. npm包管理器,是集成在node中的,所以安装了node也就 ...
- 工控随笔_16_西门子_S7-200.Smart软件安装兼容性说明和错误代码:error code hr=0x80070430
现在西门子的软件是更新换代太快了,前几年还是Step 7 Micro/Win,后来又出了S7-200 Smart PLC,理所当然的编程调试软件也水涨船高,出了新的Step 7 Micro/Win ...
- 如何让Enum枚举实现异或操作
var flag = Week.Monday; flag = flag | Week.Wednesday; if ((flag & Week.Monday) == Week.Monday ) ...
- python基础知识15---三元表达式、列表推导式、生成器表达式、递归、匿名函数、内置函数
阅读目录 一 三元表达式.列表推导式.生成器表达式 二 递归与二分法 三 匿名函数 四 内置函数 五 阶段性练习 一. 三元表达式.列表推导式.生成器表达式 1 三元表达式 name=input('姓 ...
- 根据导出的查询结果拼接字符串,生成sql语句并保存到txt文件中
import os os.chdir("C:/") path = os.getcwd() print(path) f = open("sql.csv") # p ...