小程序索引

logs.wxml:

<!--logs.wxml-->
<view class="container log-list">
<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>
  <!-- 侧边字母导航 -->
  <view class="list-shortcut">
    <block wx:for="{{logs}}">
      <text class="{{currentIndex===index?'current':''}}" data-id="{{item.title}}" bindtap='scrollToview'>{{item.title}}</text>
    </block>
  </view>
  <!-- 固定在顶部的字母导航 -->
  <view class="list-fixed {{fixedTitle=='' ? 'hide':''}}" style="transform:translate3d(0,{{fixedTop}}px,0);">
    <view class="fixed-title">
      {{fixedTitle}}
    </view>
  </view>
</view>

logs.js:

const app = getApp()
const TITLE_HEIGHT = 30
const ANCHOR_HEIGHT = 18
Page({
  data: {
    toView:'',
    logs: [],
    scrollTop:0,
    HOT_NAME:'热',
    HOT_SINGER_LEN:10,
    listHeight:[],
    currentIndex:0,
    fixedTitle:'',
    fixedTop:0,
    list:[
      {
        "index": "X",
        "name": "薛之谦",
        "img":''
      },
      {
          "index": "Z",
          "name": "周杰伦",
          "img":''
      },
      {
          "index": "B",
          "name": "BIGBANG (빅뱅)",
          "img":''
      },
      {
          "index": "B",
          "name": "陈奕迅",
          "img":''
      },
      {
          "index": "L",
          "name": "林俊杰",
          "img":''
      },
      {
          "index": "A",
          "name": "Alan Walker (艾伦·沃克)",
          "img":''
      },
    ]
  },
  onLoad: function () {
    var that = this,
        list = that.data.list;
    wx.hideLoading()
    this.setData({
      logs: this._normalizeSinger(list)
    })
    this._calculateHeight()
  },
  _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.name,
          avatar:item.img
          })
      }
      const key = item.index
      if (!map[key]) {
        map[key] = {
          title: key,
          items: []
        }
      }
      map[key].items.push({
        name: item.name,
        avatar: item.img
      })
    })
    // 为了得到有序列表，我们需要处理 map
    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)
  },
  scroll :function(e) {
    var newY = e.detail.scrollTop;
    this.scrollY(newY);
  },
  scrollY(newY) {
    const listHeight = this.data.listHeight
    // 当滚动到顶部，newY>0
    if (newY == 0 || newY < 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 (newY >= height1 && newY < height2) {
        this.setData({
          currentIndex:i,
          fixedTitle:this.data.logs[i].title
        })
        this.fixedTt(height2 - newY);
        return
      }
    }
    // 当滚动到底部，且-newY大于最后一个元素的上限
    this.setData({
      currentIndex: listHeight.length - 2,
      fixedTitle: this.data.logs[listHeight.length - 2].title
    })
  },
  fixedTt(newVal) {
    let fixedTop = (newVal > 0 && newVal < TITLE_HEIGHT) ? newVal - TITLE_HEIGHT : 0
    if (this.data.fixedTop === fixedTop) {
      return
    }
    this.setData({
      fixedTop:fixedTop
    })
  },
  _calculateHeight() {
    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)
  },
  scrollToview(e){
    var id = e.target.dataset.id
    if (id == '热') {
      this.setData({
        scrollTop:0
      })
    } else {
      this.setData({
        toView: id
      })
    }
    
  }
})

logs.wxss:

.log-list {
  display: flex;
  flex-direction: column;
  /* padding-bottom:60rpx; */
}
.log-item {
  margin: 10rpx;
}
.title {
  height: 60rpx;
  line-height: 60rpx;
  padding-left: 40rpx;
  font-size: 12px;
  color: rgba(255, 255, 255, 1);
  background: #ccc;
  margin-top:60rpx;
}
.title:first-child {
  margin-top:0;
}
.list-group-item {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  padding: 40rpx 0 0 60rpx;
}
.list-group-item:last-child {
  padding-bottom: 60rpx;
}
.list-group-item .icon {
  width:100rpx;
  height:100rpx;
  border-radius: 50%;
}
::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
}
.list-shortcut {
  position: fixed;
  z-index: 30;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 20px;
  padding: 20px 0;
  border-radius: 10px;
  text-align: center;
  background: rgba(0,0,0,.3);
  font-family: Helvetica;
}
.list-shortcut text {
  display: block;
  padding: 3px;
  line-height: 1;
  color: #fff;
  font-size: 12px;
}
.current{
  color: #ffcd32 !important;
}
.list-fixed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.fixed-title {
  height:60rpx;
  line-height:60rpx;
  padding-left:40rpx;
  font-size:12px;
  color:rgba(255, 255, 255, 1);
  background:#ccc;
}