字母导航跳转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 英文问答程序,规则是: 无论用户说什么,首先把对方说的话在一行中原样打印出来: ...
随机推荐
- redis过期机制
Redis会自己回收清理不用的数据吗? 如果能,那如何配置? 如果不能,如何防止数据累加后大量占用存储空间的问题? 之前一直接触Redis不是很深入,最近项目当中遇到一个需求场景,需要清空一些存放在R ...
- C++ 凸包生成算法
由于我的极差记忆力,我打算把这个破玩意先记下来.因为以后会有改动(Delaunay三角网生成算法),我不想把一个好的东西改坏了... 好吧-- 凸包生成算法,: 1.先在指定的宽(width)高(he ...
- Python assert(断言)
Python assert(断言)可以分别后面的判断是否正确,如果错误会报错 示例: a = 1 assert type(a) is int print('No problem') 输出结果: No ...
- RPC概念及分类【转载】
RPC概念及分类 RPC全称为Remote Procedure Call,翻译过来为“远程过程调用”.目前,主流的平台中都支持各种远程调用技术,以满足分布式系统架构中不同的系统之间的远程通信和相互调用 ...
- 目标文件obj的各段 2
#程序的自我修养 page68
- pycharm操作
- Vue 错误记录:Cannot read property 'beforeRouteEnter' of undefined
点击某路由链接,页面提示: Cannot read property 'beforeRouteEnter' of undefined 查看代码并无手写beforeRouterEnter设置, 把页面内 ...
- pyhanlp:hanlp的python接口
HanLP的Python接口,支持自动下载与升级HanLP,兼容py2.py3. 安装 pip install pyhanlp 使用命令hanlp来验证安装,如因网络等原因自动安装失败,可参考手动配置 ...
- ERROR: cannot launch node of type [teleop/teleop_key]: can't locate node [teleop_key] in package [teleop]
节点由python写成,编译通过,运行时报错如下: ERROR: cannot launch node of type [teleop/teleop_key]: can't locate node [ ...
- MD5 Hashing in Java
参考: MD5 Hashing in Java