仿微信聯系人列表滑動字母索引

今天做到了一個聯系人列表的需求, 要求和微信的一樣! 寫出來分享給大家, 使用了jq和doT模版引擎(doT模版教程)

預覽頁面地址

首先對數據源進行數據排序

 // 數據排序
    function sortData(data) {
        var letterArr = [];
        for (var i = 0; i < data.length; i++) {
            for (var j = 0; j < data.length; j++) {
                if (data[i].flag < data[j].flag) {
                    var temp = data[i];
                    data[i] = data[j];
                    data[j] = temp;
                }
            }
         }
         if (f_check_uppercase(data[0].flag)) {
            letterArr.push(data[0].flag)
         } else {
            letterArr.push('#')
         }
        for (var i = 0; i < data.length; i++) {
            if(f_check_uppercase(data[0].flag)) {
                data[0].flagLetter = data[0].flag
            } else {
                data[0].flagLetter = '#'
            }
            if (i>0) {
                if (data[i].flag !== data[i-1].flag) {
                    if (f_check_uppercase(data[i].flag)) {
                        data[i].flagLetter = data[i].flag;
                        letterArr.push(data[i].flag)
                    } else {
                        data[i].flagLetter = '#';
                        letterArr.push('#')
                    }
                }
            }
         }
         // 側邊欄
         var str = '' ;
         for (var i = 0; i < letterArr.length; i++) {
            str += '<a ontouchstart="anchorJump(this)"  >'+ letterArr[i] +'</a>'
         }
         $('.slidePage div').html(str)
         $('.resultList').html(doT.template($('#listT').text())(data))
    }
	// 判斷是否是字母
    function f_check_uppercase(obj) {
       if (/[A-Z]/.test(obj))    {   
          return true;   
       }    
       return false;   
    }

然后是跳轉錨點

location.hash = '#id' 和a標簽的作用相同, 跳轉到指定錨點

 // 跳轉錨點
    function anchorJump(n) {
        var text = $(n).text();
        if (text.length < 2) {
            $('.letter').text(text)
            $('.letter').css({'opacity':' 1'})
            location.hash = '#' + text
        }
    }

手指滑動, 頁面跳轉

// 手指滑動
    function move() {
	    // 阻止默認事件, 頁面滑動
        event.preventDefault();
        anchorJump(document.elementFromPoint(event.changedTouches[0].clientX,event.changedTouches[0].clientY))
    }

document.elementFromPoint(x,y) 獲取指定坐標的頂層元素

最后滑動結束, 手指離開屏幕

// 滑動結束
    function touchEnd() {
        var opcityNum = 1;
        setInterval(function () {
            opcityNum -= 0.1;
            if (opcityNum > 0) {
                $('.letter').css({'opacity': opcityNum})
            } else {
                clearInterval();
            }
        },50)
    }

點擊每條數據

// 點擊事件
    function clickInfo(ele) {
        alert($(ele).find('.name').text())
    }

完整的代碼鏈接