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

<scroll-view scroll-y  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':''}}" >
  <view class="fixed-title">
   {{fixedTitle}}
  </view>
</view>

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)

const listHeight = this.data.listHeight
// 當(dāng)滾動到頂部，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
 }
}
// 當(dāng)滾動到底部，且-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 (艾倫·沃克)",
  },
]