字母导航跳转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 英文问答程序,规则是: 无论用户说什么,首先把对方说的话在一行中原样打印出来: ...
随机推荐
- Mac使用
安装you-get: 用到mac下安装软件的工具:brew 百度搜brew到官网首页照说明在终端执行一段指令 安装方法:命令行输入 /usr/bin/ruby -e "$(curl -fsS ...
- Int和String互转的方法
Java 中int.String的类型转换 int -> String int i=12345;String s="";第一种方法:s=i+"";第二 ...
- JNI学习笔记_Java调用C —— 非Android中使用的方法
一.学习笔记 1.java源码中的JNI函数本机方法声明必须使用native修饰. 2.相对反编译 Java 的 class 字节码文件来说,反汇编.so动态库来分析程序的逻辑要复杂得多,为了应用的安 ...
- 提交代码,SVN被锁定,提示:svn is already locked解决方案
今天遇到一个问题,svn 在提交代码的时候出现了svn is already locked,这是什么鬼,svn 没少用,但是这种情况,还是第一次遇到,于是,百度一下,查了一下,做一下个人分享. 遇到这 ...
- CSS奇淫技巧
对于图标,使用fontsize设置大小,而非宽高! 高度不够的时候使用min-height 保持宽高比 四个方向的padding都是相对于 本盒子的宽度来的 常用于视频和图片的展示,比如轮播图. 所以 ...
- Flutter 常用命令
Flutter 常用命令: Flutter 常用命令 说明 flutter 列出所有的命令 flutter help 查看具体命令的帮助信息 flutter doctor 查看是否还需要安装其它依赖 ...
- Redis 单机部署
参考文章: https://www.cnblogs.com/zy-303/p/10273167.html#_label0 https://blog.csdn.net/linyifan_/article ...
- <ROS> NodeHandle句柄
作者:jack_20 原文:https://blog.csdn.net/jack_20/article/details/70746736 1.句柄可以让你通过构造函数指定命名空间 ros::NodeH ...
- iOS业务模块化利用CocoaPod入门实践
iOS业务模块化即是通过不同的工程管理不同的业务,通常应用在中大型项目中,这样做的好处主要有:1.多人开发时,防止工程文件冲突 2.能够为下个不同的项目抽取代码,话不多说,直接看步骤:括号内容为本例 ...
- RN 使用第三方字体
Android: 程序会尝试在 assets/fonts 目录下查找字体文件,如果没找到会使用默认的字体 所以将文件放到路径下才能生效! [project root]/android/app/src/ ...