字母导航跳转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 英文问答程序,规则是: 无论用户说什么,首先把对方说的话在一行中原样打印出来: ...
随机推荐
- java单例设计模式总结及举例
* 设计模式:前人总结出来的经验,被后人直接拿来使用. * 单例设计模式:一个类只允许有一个对象,将这个对象作为一个全局的访问点,提供出去供大家使用. * 分析: * 1.用户只能有一个对象 * 2. ...
- JAVA工具类-StrUtils
public class StrUtils { public static final String UTF_8 = "UTF-8"; /** * 去掉小数字符串后面无用的零 */ ...
- 前端基础:form表单提交
今天介绍下form表单提交经常用到的表单元素. 1:datalist元素,一般与input组建配合使用,以定义可能输入的值,例如: <!DOCTYPE html> <html lan ...
- 16路PWM输出的pca9685模块
今天要介绍的就是该模块,该模块是16路pwm模块,使用I2C总线可以控制16路舵机(led). 接线OE空着就可以,其他VCC是芯片供电+5,SCL时钟线,SDA信号线,GND地线. 芯片介绍可以看: ...
- Java技术学习之影响MySQL性能的配置参数
本文将介绍MySQL参数的五大类设置,平时我们一般都很少碰它们,在进行MySQL性能调优和故障诊断时这些参数还是非常有用的. (一)连接连接通常来自Web服务器,下面列出了一些与连接有关的参数,以及该 ...
- java 重载、重写、重构的区别
1.重载 构造函数是一种特殊的函数,使用构造函数的目的是用来在对象实例化时初始化对象的成员变量.由于构造函数名字必须与类名一致,我们想用不同的方式实例化对象时,必须允许不同的构造方法同时存在,这就用到 ...
- AMQP close-reason, initiated by Peer, code=406
错误: AMQPclose-reason, initiated by Peer, code=406, text="PRECONDITION_FAILED -inequivalent arg ...
- 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 [ ...
- 用openssl为EAP-TLS生成证书(CA证书,服务器证书,用户证书)
用openssl为EAP-TLS生成证书(CA证书,服务器证书,用户证书) 来源: https://www.cnblogs.com/osnosn/p/10597897.html 来自osnosn的博客 ...
- 自动编译批处理设置(MSBuild)
基本设置,如果想更改可以设置. @echo off rem --------------------------------- rem ----作成者:李暁賓--------------- rem - ...