JavaScript 위 챗(전화)연락처 목록 슬라이딩 알파벳 색인 인 스 턴 스 설명(추천)

오늘 연락처 목록 의 수 요 를 해 냈 습 니 다.위 챗 과 똑 같이 요 구 했 습 니 다!써 서 여러분 께 공유 하고 jq 와 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())
 }

이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 십시오.저희 에 대한 지지 에 감 사 드 립 니 다!