起因:產品給了一個需求,要求寫一個跟微信朋友圈一樣,取首字母產生的通訊錄標籤頁,

寫了一遍,發現意外的好寫

最終效果

資料採用了隨機字串的方法,並且使用陣列方法排序,

        let data = [];
        let title = [];
        for (let i = 0; i < 200; i++) {
            let s = Math.random().toString(36).substr(2);
            data.push(s);
            let number = title.indexOf(s.substr(0, 1));
            if (number === -1) {
                title.push(s.substr(0, 1));
            }
        }
        data.sort();
        title.sort();
 

核心方法就是根據找到其中的索引,跳轉位置,通過window.scrollTo,進行跳轉,用findIndex來進行查詢準確標籤位置,進行跳轉,

主要計算公式:

需要跳轉的高度 = ( 條目高度  *  索引位置 [+ 其他控制元件的高度,在其之上的控制元件])

注: 每個條目大小必須已知 

                {
                    this.state.title.map((item, position) => {
                        return <div onClick={() => {
                            let find = this.state.data.findIndex(obj => obj.substr(0, 1) === item);
                            window.scrollTo(0, find * 40 + 400);
                        }}>{item}</div>
                    })
                }