小程序组件模仿微信通讯录实现代码

最近模仿微信通讯录做了一个小程序组件分享给大家，如下：

翻译

因为手机是用来录屏的，所以视频格式是MP4。上传到文章时发现只支持图片。好在电脑自动记录屏幕，所以简单记录。之后建议只能用4M，图片只能再次压缩。所以画质略逊一筹。请注意。

特色功能介绍

用户只需要按照格式传入参数，组件可以自动按首字母对参数进行分组，简单方便；组件右侧第一个字母的导航不需要额外的值，根据参数显示哪些第一个字母(没有就不要了)；用户上下滑动时，左右联动；单击右侧导航，组件将相应地上下滚动。实施基础

这个组件只在小程序的基础组件中使用了滚动视图，没那么麻烦，简单方便，一目了然，哈哈哈

页面结构

滚动区域

scroll-view scroll-y style=' height :100%；white-space : nowrap；'滚动到视图='{{toView}} '启用-返回到顶部bindscroll='scroll '滚动-带动画滚动-top='{{scrollTop}} '视图类='列表-组' wx : for=' { { logs } } ' wx : for-item='组'视图类=' title ' id=' { { group . title } } ' { { group . title } }/视图块wx:for='{{group.items}} 'name } }/text/view/block/view/scroll-view简述以上代码：根据applet文档，使用**scroll-view**组件进行垂直滚动时，必须设置高度。您可以看到我在代码中这意识到组件的滚动高度是整个页面。但是请注意，很多同学会发现，设置了100%的高度后，组件就没有效果了。这是因为您没有将页面高度设置为100%，所以您需要在app.wxss中将页面高度设置为100%；其他属性只看文档，我就不多说了；

2.侧字母导航

view class=' list-快捷键' block wx : for=' { { logs } } ' text class=' { { CurrentDex===index？当前' :''}} '数据-id=' {{item。title } }“bind tap=”scroltoview“{ item。title}}/text/block/view3。字母导航固定在顶部

view class=' list-fixed { { fixed title==' '？'隐藏“:''}}”样式=“transform : translate 3d(0，{{fixedTop}}px，0)；”view class=' fixed-title“{ fixed title } }/view/view js

渲染参数

NormalizeSinger(list) {//list呈现让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(项。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==这个。数据。hot _ name) {hot。push (val)}} ret。sort ((a，b)={return a.title.charcodeat()。

var LH h8=[]，那=这个；让高度=0;推动（高度);var查询=wx。createselectorquery()；query.selectAll(' .列表-组')。boundingClientRect(function(rects){ var rect=rects，len=rect.lengthfor(设I=0；我透镜；i ) { height=rect[i].身高；lHeight.push(高度)} })。exec()；var calHeight=设置间隔(函数(){ if(LH三！=[0]){那个。setdata({ listsheight : LHhther })；clearInterval(calHeight)；} },1000)在获取元素属性上，小程序提供了一个很方便的api，wx。createselectotquery()；具体使用方法请看[节点信息原料药[3]使用该方法获取到各分组的高度，存入lh8g中用于之后滚动时判断使用；同学们可以看到我在将lh8g赋值给数据的列表高度时使用了定时器，这是因为获取节点信息美国石油学会(美国石油协会)是异步执行的，顾你直接进行赋值是没有效果的，所以我使用了定时器功能；

**我觉得这里使用定时器不是最好的处理方式，同学们有更好的方法请告诉我，谢谢**

对滚动事件进行处理

常数列表高度=this.data.listHeight//当滚动到顶部，scrollY 0 if(scrollY==0 | | scrollY 0){ this。setdata({ current exx :0，fixedTitle:'' }) return}//在中间部分滚动用于(设I=0；我列出身高。长度-1；I){让高度1=列表高度[I]让高度2=列表高度[I 1]if(scrollY=height 1 scrollY height 2){ this。setdata({ current defx : I，固定标题： this。数据。日志.标题})这个。固定高度(2-NEwY)；return }}//当滚动到底部，且-scrollY大于最后一个元素的上限这个。setdata({ CurrentAnDex : ListHeight。长度-2，FixedItle :这个。数据。日志[列表高度。长度-2].标题})参数格式

list:[ { 'index': 'X '，' name': '薛之谦，}，{ 'index': 'Z '，' name': '周杰伦，}，{ 'index': 'B '，' name': ' big bang()',},{ ' index ' : ' b '，' name ' : '陈奕迅，},{ '索引： 'L '，'名称' : '林俊杰，}，{ 'index': 'A '，' name': '阿伦沃克（艾伦沃克)', },]最后

完整代码请戳开源代码库

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。