小程序組件之仿微信通訊錄的實現(xiàn)代碼

更新時間：2018年09月12日 11:59:20 作者：Heternally

這篇文章主要介紹了小程序組件之仿微信通訊錄的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

最近模仿微信通信錄做了個小程序組件，分享給大家，具體如下：

效果圖

因為是使用的手機錄屏，視頻格式為MP4，上傳到文章時發(fā)現(xiàn)只支持圖片，還好電腦自動錄屏功能，所以簡單的錄制了一下，完后又提示只能4M，只能再去壓縮圖片，所以畫質略渣，各位客官講究的看看吧。

特色功能介紹

用戶只需按照格式傳入?yún)?shù)，組件能夠自動將參數(shù)按首字母分組，簡單方便；
組件右側首字母導航無需另外傳值，并且根據(jù)參數(shù)具體有哪些首字母顯示（沒有的咱就不要）；
用戶進行上下滑動時，左右相互聯(lián)動；
點擊右側導航，組件會相應的上下滾動。

實現(xiàn)基礎

本組件只使用了小程序基礎組件中的scroll-view，不用那么麻煩，簡單方便，一看就懂，哈哈哈

wxml

滾動區(qū)域

<scroll-view scroll-y style="height:100%;white-space:nowrap;" scroll-into-view="{{toView}}" enable-back-to-top bindscroll="scroll" scroll-with-animation scroll-top="{{scrollTop}}">
 <view class="list-group" wx:for="{{logs}}" wx:for-item="group">
  <view class="title" id="{{group.title}}">{{group.title}}</view>
  <block wx:for="{{group.items}}" wx:for-item="user">
   <view id="" class="list-group-item">
    <image class="icon" src="{{user.avatar}}" lazy-load="true"></image>
    <text class="log-item">{{user.name}}</text>
   </view>
  </block>
 </view>
</scroll-view>

簡單說一下上述代碼：根據(jù)小程序文檔，在使用**scroll-view**組件用于豎向滾動時一定要設置高度,你們可以看到我在代碼中設置了'height:100%;'這就實現(xiàn)了組件的滾動高度是整個頁面。但是請注意：很多同學會發(fā)現(xiàn)設置了高度100%后，組件并沒有效果，這是因為你沒有將頁面高度設置為100%，所以你還需在app.wxss中設置page的高度為100%；其他的屬性看文檔就好，我就不再多說；

2.側面字母導航

<view class="list-shortcut">
 <block wx:for="{{logs}}">
  <text class="{{currentIndex===index?'current':''}}" data-id="{{item.title}}" bindtap='scrollToview'>{{item.title}}</text>
 </block>
</view>

3.固定在頂部的字母導航

<view class="list-fixed {{fixedTitle=='' ? 'hide':''}}" style="transform:translate3d(0,{{fixedTop}}px,0);">
  <view class="fixed-title">
   {{fixedTitle}}
  </view>
</view>

渲染參數(shù)

normalizeSinger(list) {
  //列表渲染
  let map = {
   hot: {
    title: this.data.HOT_NAME,
    items: []
   }
  }
  list.forEach((item, index) => {
   if (index < this.data.HOT_SINGER_LEN) {
    map.hot.items.push({
     name: item.Fsinger_name,
     avatar:this.constructor(item.Fsinger_mid)
     })
   }
   const key = item.Findex
   if (!map[key]) {
    map[key] = {
     title: key,
     items: []
    }
   }
   map[key].items.push({
    name: item.Fsinger_name,
    avatar: this.constructor(item.Fsinger_mid)
   })
  })
  let ret = []
  let hot = []
  for (let key in map) {
   let val = map[key]
   if (val.title.match(/[a-zA-Z]/)) {
    ret.push(val)
   } else if (val.title === this.data.HOT_NAME) {
    hot.push(val)
   }
  }
  ret.sort((a, b) => {
   return a.title.charCodeAt(0) - b.title.charCodeAt(0)
  })
  return hot.concat(ret)
 },

計算分組高度

var lHeight = [],
  that = this;
let height = 0;
lHeight.push(height);
var query = wx.createSelectorQuery();
query.selectAll('.list-group').boundingClientRect(function(rects){
  var rect = rects,
    len = rect.length;
  for (let i = 0; i < len; i++) {
    height += rect[i].height;
    lHeight.push(height)
  }
 }).exec();
var calHeight = setInterval(function(){
  if (lHeight != [0]) {
    that.setData({
     listHeight: lHeight
    });
  clearInterval(calHeight);
 } 
},1000)

在獲取元素屬性上，小程序提供了一個很方便的api，wx.createSelectotQuery();具體使用方法請看[節(jié)點信息API][3]
使用該方法獲取到各分組的高度，存入lHeight中用于之后滾動時判斷使用；
同學們可以看到我在將lHeight賦值給data的listHeight時使用了定時器，這是因為獲取節(jié)點信息api是異步執(zhí)行的，顧你直接進行賦值是沒有效果的，所以我使用了定時器功能；

**我覺得這里使用定時器不是最好的處理方式，同學們有更好的方法請告訴我，謝謝**

對滾動事件進行處理

const listHeight = this.data.listHeight
// 當滾動到頂部，scrollY<0
if (scrollY == 0 || scrollY < 0) {
 this.setData({
  currentIndex:0,
  fixedTitle:''
 })
 return
}
// 在中間部分滾動
for (let i = 0; i < listHeight.length - 1; i++) {
 let height1 = listHeight[i]
 let height2 = listHeight[i + 1]
 if (scrollY >= height1 && scrollY < height2) {
  this.setData({
   currentIndex:i,
   fixedTitle:this.data.logs[i].title
  })
  this.fixedTt(height2 - newY);
  return
 }
}
// 當滾動到底部，且-scrollY大于最后一個元素的上限
this.setData({
 currentIndex: listHeight.length - 2,
 fixedTitle: this.data.logs[listHeight.length - 2].title
})

參數(shù)格式

list:[
  {
    "index": "X",
    "name": "薛之謙",
  },
  {
    "index": "Z",
    "name": "周杰倫",
  },
  {
    "index": "B",
    "name": "BIGBANG (빅뱅)",
  },
  {
    "index": "B",
    "name": "陳奕迅",
  },
  {
    "index": "L",
    "name": "林俊杰",
  },
  {
    "index": "A",
    "name": "Alan Walker (艾倫·沃克)",
  },
]

最后

完整代碼請戳 gitHub

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

ES6 javascript中Class類繼承用法實例詳解
這篇文章主要介紹了ES6 javascript中Class類繼承用法,結合實例形式較為詳細的分析了ES6繼承的基本用法、相關屬性、方法與使用技巧,需要的朋友可以參考下
2017-10-10
javascript結合CSS實現(xiàn)蘋果開關按鈕特效
這篇文章主要介紹了javascript結合CSS實現(xiàn)蘋果開關按鈕特效的方法以及全部代碼，效果非常不錯，兼容性也很好，有需要的小伙伴自己參考下
2015-04-04
JS輪播圖的實現(xiàn)方法2
這篇文章主要為大家詳細介紹了JS輪播圖的具體實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-08-08
JSON獲取屬性值方法代碼實例
這篇文章主要介紹了JSON獲取屬性值方法代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-06-06
webpack自動化打包方式詳解
這篇文章主要介紹了webpack自動化打包的相關知識，本文結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧
2023-02-02
深入理解移動前端開發(fā)之viewport
這篇文章主要介紹了移動前端開發(fā)之viewport的相關知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-10-10
javascript實現(xiàn)日期三級聯(lián)動下拉框選擇菜單
這篇文章主要介紹了javascript實現(xiàn)日期三級聯(lián)動下拉框選擇菜單，實現(xiàn)JS年月日三級聯(lián)動下拉框選擇功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04
ionic js 模型 $ionicModal 可以遮住用戶主界面的內容框
這篇文章主要介紹了ionic js 模型 $ionicModal 可以遮住用戶主界面的內容框的相關資料,需要的朋友可以參考下
2016-06-06
使用JavaScript實現(xiàn)改造layer彈層移動版組件
這篇文章主要為大家詳細介紹了使用JavaScript實現(xiàn)改造layer彈層移動版組件的相關知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
2024-04-04
JS中map與forEach無法跳出循環(huán)及every和some的使用
在我們平時使用習慣中,for循環(huán)里要跳出整個循環(huán)是使用break,但在數(shù)組中用forEach循環(huán)或者map如要退出整個循環(huán)使用break會報錯,使用return也不能跳出循環(huán),下面這篇文章主要介紹了關于JS中map與forEach無法跳出循環(huán)及every和some的使用的相關資料,需要的朋友可以參考下
2023-05-05