亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JavaScript仿微信(電話)聯(lián)系人列表滑動(dòng)字母索引實(shí)例講解(推薦)

 更新時(shí)間:2017年08月16日 10:19:37   作者:奮斗X青年  
這篇文章主要介紹了仿微信(電話)聯(lián)系人列表滑動(dòng)字母索引實(shí)例,通過for循環(huán)進(jìn)行判斷,具體操作步驟大家可查看下文的詳細(xì)講解,感興趣的小伙伴們可以參考一下。

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

首先對數(shù)據(jù)源進(jìn)行數(shù)據(jù)排序

// 數(shù)據(jù)排序
 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('#')
     }
    }
   }
   }
 // 側(cè)邊欄
   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; 
 }

然后是跳轉(zhuǎn)錨點(diǎn)

location.hash = '#id' 和a標(biāo)簽的作用相同, 跳轉(zhuǎn)到指定錨點(diǎn)

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

手指滑動(dòng), 頁面跳轉(zhuǎn)

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

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

最后滑動(dòng)結(jié)束, 手指離開屏幕

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

點(diǎn)擊每條數(shù)據(jù)

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

以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助~如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持!

相關(guān)文章

最新評論