效果圖

話不多說，先(xian)上效果圖

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

特色功能介紹

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

實現基礎

說到滾動當然少不了小程序的基礎組件scroll-view，該組件就是在此基礎上實現的；
監聽組件(jian)scroll-view的bindscroll事(shi)件(jian)，進(jin)而對組件(jian)數據進(jin)行(xing)操作，即可完成。

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%
 其他的屬性看文檔就(jiu)(jiu)好(hao)，我(wo)就(jiu)(jiu)不再多說；

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.固(gu)定在頂部的字母導(dao)航

仔細的(de)(de)同學能發現在滾(gun)動(dong)(dong)時，頂部有一個固定位置的(de)(de)字母導航(hang)，其值對應滾(gun)動(dong)(dong)到的(de)(de)區域(yu)

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

Wxss

樣式太簡單了，就不發了，重點看js部(bu)分

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)
  },

將用戶數據分(fen)為(wei)兩大(da)塊，即(ji)熱門(men)組(zu)(zu)和不(bu)熱門(men)組(zu)(zu)默(mo)認(ren)將參數的前10組(zu)(zu)歸(gui)類為(wei)熱門(men)組(zu)(zu)，然后對所以參數安裝首(shou)字母進行(xing)排序(xu)分(fen)組(zu)(zu)。

1. 計算各組高度

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
使用該方法獲取到各分組的高度，存入lHeight中用于之后滾動時判斷使用；
同學們可以看到我在將lHeight賦值給data的listHeight時使用了定時器，這是因為獲取節點信息api是異步執行的，顧你直接進行賦值是沒有效果的，所以我使用了定時器功能；
我覺得這里使用定時器不是最好的處理方式，同學們有更好的方法請告訴我，謝謝
3.第三步就是(shi)在滾(gun)動的(de)(de)時(shi)候獲(huo)取(qu)滾(gun)動高度，相應的(de)(de)處(chu)理即(ji)可(ke)，滾(gun)動使用到了scroll-view自帶事(shi)件(jian)，這(zhe)個事(shi)件(jian)會返回(hui)滾(gun)動的(de)(de)距離(li)，及(ji)其方便

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 (艾倫·沃克)",
    },
]

如果你們還需要其(qi)他的(de)參數，對應的(de)在后面加上即可(ke)。

END