小程式元件-仿微信通訊錄

摘要： 效果圖 因為是使用的手機錄屏，視訊格式為MP4，上傳到文章時發現只支援圖片，還好電腦自動錄屏功能，所以簡單的錄製了一下，完後又提示只能4M，只能再去壓縮圖片，所以畫質略渣，各位客官講究的看看吧。 特色功能介紹 使用者只需按照格式傳入引數，元件能夠自動將引數按首字母...

效果圖

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

特色功能介紹

1. 使用者只需按照格式傳入引數，元件能夠自動將引數按首字母分組，簡單方便；
2. 元件右側首字母導航無需另外傳值，並且根據引數具體有哪些首字母顯示（沒有的咱就不要）；
3. 使用者進行上下滑動時，左右相互聯動；
4. 點選右側導航，元件會相應的上下滾動。

實現基礎

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

wxml

1. 滾動區域

<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>
複製程式碼

簡單說一下上述程式碼：根據小程式文件，在使用**scroll-view**元件用於豎向滾動時一定要設定高度,你們可以看到我在程式碼中設定了'height:100%;'這就實現了元件的滾動高度是整個頁面。 但是請注意：很多同學會發現設定了高度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>
複製程式碼

js

1. 渲染引數

   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)
   },
   複製程式碼

2. 計算分組高度

   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();具體使用方法請看[節點資訊API][3]
   使用該方法獲取到各分組的高度，存入lHeight中用於之後滾動時判斷使用；
   同學們可以看到我在將lHeight賦值給data的listHeight時使用了定時器，這是因為獲取節點資訊api是非同步執行的，顧你直接進行賦值是沒有效果的，所以我使用了定時器功能；
   **我覺得這裡使用定時器不是最好的處理方式，同學們有更好的方法請告訴我，謝謝**
   複製程式碼

3. 對滾動事件進行處理

   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
   })
   複製程式碼

引數格式

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

最後

完整程式碼請戳 ofollow,noindex">gitHub

歡迎關注個人部落格