欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

今天做到了一個聯(lián)系人列表的需求, 要求和微信的一樣! 寫出來分享給大家, 使用了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())
 }

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

相關文章

  • 微信公眾號獲取用戶地理位置并列出附近的門店的示例代碼

    微信公眾號獲取用戶地理位置并列出附近的門店的示例代碼

    這篇文章主要介紹了微信公眾號獲取用戶地理位置并列出附近的門店的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-07-07
  • 功能強大的Bootstrap使用手冊(一)

    功能強大的Bootstrap使用手冊(一)

    這篇文章主要為大家詳細介紹了功能強大的Bootstrap使用手冊,分享了Bootstrap使用步驟和常用用法,感興趣的小伙伴們可以參考一下
    2016-08-08
  • Three.js中的紋理圖像應用和屬性調整方法

    Three.js中的紋理圖像應用和屬性調整方法

    在three.js中紋理貼圖是用來給物體表面添加圖案、顏色或者其他視覺效果的一種技術,這篇文章主要給大家介紹了關于Three.js中紋理圖像應用和屬性調整的相關資料,需要的朋友可以參考下
    2024-01-01
  • JS檢測圖片大小的實例

    JS檢測圖片大小的實例

    這篇文章介紹了JS檢測圖片大小的實例,有需要的朋友可以參考一下
    2013-08-08
  • javascript中setTimeout的問題解決方法

    javascript中setTimeout的問題解決方法

    這篇文章主要介紹了javascript中setTimeout的問題以及對應的解決方法,需要的朋友可以參考下
    2014-05-05
  • 微信小程序自動化部署的全過程

    微信小程序自動化部署的全過程

    由于微信小程序需要在微信小程序助手上發(fā)布,比較麻煩,可以配置CI 自動化的發(fā)布,下面這篇文章主要給大家介紹了關于微信小程序自動化部署的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-07-07
  • js獲取當前周、上一周、下一周日期

    js獲取當前周、上一周、下一周日期

    本文主要介紹了js獲取當前周、上一周、下一周日期的實例,具有很好的參考價值。下面跟著小編一起來看下吧
    2017-03-03
  • javascript 數組操作實用技巧

    javascript 數組操作實用技巧

    數組和字符串類型對象的方法我特容易搞混淆,所以把他列出來,免得每次取查。
    2009-09-09
  • 微信小程序基于movable-view實現(xiàn)滑動刪除效果

    微信小程序基于movable-view實現(xiàn)滑動刪除效果

    這篇文章主要介紹了微信小程序基于movable-view實現(xiàn)滑動刪除效果,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-01-01
  • javascript驗證完全方法具體實現(xiàn)

    javascript驗證完全方法具體實現(xiàn)

    下面這段代碼完全實現(xiàn)了判斷是否合格.傳入號碼就行了,包括了算法,下面的是用Ext實現(xiàn)的,但是基于javascript的語法居多,基本都可以用
    2013-11-11

最新評論