码迷,mamicode.com
首页 > 其他好文 > 详细

字母导航跳转react核心代码

时间:2018-11-08 18:30:20      阅读:448      评论:0      收藏:0      [点我收藏+]

标签:列表   component   element   clientx   script   one   asc   set   mount   

componentDidMount() {
    this.move();
}
skipToDep(e) {
    let dom = document.getElementById(e); // 获取要跳至的字母节点
    if (e === ‘#‘) {
        this.props.scroller.scrollTo(0, 0);
    } else {
        this.props.scroller.scrollTo(0, -dom.offsetTop);
    }
}
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核心代码

标签:列表   component   element   clientx   script   one   asc   set   mount   

原文地址:https://www.cnblogs.com/ljwk/p/9929993.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!