@H_301_0@最近模仿微信通信录做了个小程序组件，分享给大家，具体如下：
@H_301_0@
效果图
<p style="text-align: center">
@H_301_0@因为是使用的手机录屏，视频格式为MP4，上传到文章时发现只支持图片，还好电脑自动录屏功能，所以简单的录制了一下，完后又提示只能4M，只能再去压缩图片，所以画质略渣，各位客官讲究的看看吧。
@H_301_0@
特色功能介绍
- 用户只需按照格式传入参数，组件能够自动将参数按首字母分组，简单方便；
- 组件右侧首字母导航无需另外传值，并且根据参数具体有哪些首字母显示（没有的咱就不要）；
- 用户进行上下滑动时，左右相互联动；
- 点击右侧导航，组件会相应的上下滚动。
实现基础
@H_301_0@本组件只使用了小程序基础组件中的scroll-view，不用那么麻烦，简单方便，一看就懂，哈哈哈 @H_301_0@wxml
@H_301_0@滚动区域{{item.title}}
@H_301_0@3.固定在顶部的字母导航
js
@H_301_0@渲染参数 {
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)
},
@H_301_0@计算分组高度
对滚动事件进行处理
= 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
})
@H_301_0@