小程序組件-仿微信通信錄

運用了該組件的小程序開發完成，詳情請看HMusic

效果圖

由於是使用的手機錄屏，視頻格式爲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 (艾倫·沃克)",
    },
]
複製代碼

最後

完整代碼請戳gitHub

歡迎關注我的博客