1. 程式人生 > >字母導航跳轉react核心代碼

字母導航跳轉react核心代碼

idm mount pre get component else reac tex text

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核心代碼