js做通訊錄的索引滑動顯示效果和滑動顯示錨點效果

只做實現。。完全沒考慮性能優化。所以我實現了以后特別卡。

 

第一個是在通訊錄右邊的索引條上進行滑動，滑動到相應字母就跳轉到相應字母的錨點上。

思路：監聽touchmove事件，獲取clientX和clientY，傳入到elementFromPoint，然后獲取到元素以后執行click()即可。

這里會有個問題，就是如果你的頁面中有遮罩層這一類的頂層元素的話，請將其pointer-events:none，就算這個元素的display:none;也沒用，實踐出真知。可以去試下。

index為索引div的id

 $("#index").get(0).addEventListener('touchmove',function(event){
         var a = document.elementFromPoint(event.touches[0].clientX,event.touches[0].clientY).parentNode;
         a.click();
     });
    

 

第二個我是想在頁面滑動到某個字母的位置時顯示閃一下這個字母。

思路：監聽scroll事件，同樣利用elementFromPoint獲取你想要的位置的對應元素，然后執行顯示效果即可。

ps:使用的是weui

    $(window).scroll(function(){
        var a = document.elementFromPoint(0,0);
        if($(a).hasClass("weui_cells_title"))
        {
            $(".weui_toast_content_my").html($(a).attr("name"));
            $("#toast").show(0);
            $("#toast").slideUp(300);
        }
    });

以上，沒了。