效果图

1.

2.因为是使用的手机录屏，视频格式为MP4，上传到文章时发现只支持图片，还好电脑自动录屏功能，所以简单的录制了一下，完后又提示只能4M，只能再去压缩图片，所以画质略渣，各位客官讲究的看看吧。

特色功能介绍用户只需按照格式传入参数，组件能够自动将参数按首字母分组，简单方便；组件右侧首字母导航无需另外传值，并且根据参数具体有哪些首字母显示（没有的咱就不要）；用户进行上下滑动时，左右相互联动；点击右侧导航，组件会相应的上下滚动。实现基础

3.说到滚动当然少不了小程序的基础组件scroll-view，该组件就是在此基础上实现的；监听组件scroll-view的bindscroll事件，进而对组件数据进行操作，即可完成。

Wxml滚动区域scroll-viewscroll-ystyle="height:100%;white-space:nowrap;"scroll-into-view="{{toView}}"enable-back-to-topbindscroll="scroll"scroll-with-animationscroll-top="{{scrollTop}}"viewclass="list-group"wx:for="{{logs}}"wx:for-item="group"viewclass="title"id="{{group.title}}"{{group.title}}/viewblockwx:for="{{group.items}}"wx:for-item="user"viewid=""class="list-group-item"imageclass="icon"src="{{user.avatar}}"lazy-load="true"/imagetextclass="log-item"{{user.name}}/text/view/block/view/scroll-view

4.简单说一下上述代码：根据小程序文档，在使用scroll-view组件用于竖向滚动时一定要设置高度,你们可以看到我在代码中设置了'height:100%;'这就实现了组件的滚动高度是整个页面。但是请注意：很多同学会发现设置了高度100%后，组件并没有效果，这是因为你没有将页面高度设置为100%，所以你还需在app.wxss中设置page的高度为100%其他的属性看文档就好，我就不再多说；

5.2.侧边字母导航

viewclass="list-shortcut"blockwx:for="{{logs}}"textclass="{{currentIndex===index?'current':''}}"data-id="{{item.title}}"bindtap='scrollToview'{{item.title}}/text/block/view

6.3.固定在顶部的字母导航

7.仔细的同学能发现在滚动时，顶部有一个固定位置的字母导航，其值对应滚动到的区域

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

8.样式太简单了，就不发了，重点看js部分

9.

js拿到参数第一步当然是将参数列表渲染上去啦，normalizeSinger(list){//歌手列表渲染letmap={hot:{title:this.data.HOT_NAME,items:[]}}list.forEach((item,index)={if(indexthis.data.HOT_SINGER_LEN){map.hot.items.push({name:item.Fsinger_name,avatar:this.constructor(item.Fsinger_mid)})}constkey=item.Findexif(!map[key]){map[key]={title:key,items:[]}}map[key].items.push({name:item.Fsinger_name,avatar:this.constructor(item.Fsinger_mid)})})letret=[]lethot=[]for(letkeyinmap){letval=map[key]if(val.title.match(/[a-zA-Z]/)){ret.push(val)}elseif(val.title===this.data.HOT_NAME){hot.push(val)}}ret.sort((a,b)={returna.title.charCodeAt(0)-b.title.charCodeAt(0)})returnhot.concat(ret)},

10.将用户数据分为两大块，即热门组和不热门组（开个玩笑?），默认将参数的前10组归类为热门组，然后对所以参数安装首字母进行排序分组。

计算各组高度varlHeight=[],that=this;letheight=0;lHeight.push(height);varquery=wx.createSelectorQuery();query.selectAll('.list-group').boundingClientRect(function(rects){varrect=rects,len=rect.length;for(leti=0;ilen;i++){height+=rect[i].height;lHeight.push(height)}}).exec();varcalHeight=setInterval(function(){if(lHeight!=[0]){that.setData({listHeight:lHeight});clearInterval(calHeight);}},1000)

11.在获取元素属性上，小程序提供了一个很方便的api，wx.createSelectotQuery();具体使用方法请看节点信息API使用该方法获取到各分组的高度，存入lHeight中用于之后滚动时判断使用；同学们可以看到我在将lHeight赋值给data的listHeight时使用了定时器，这是因为获取节点信息api是异步执行的，顾你直接进行赋值是没有效果的，所以我使用了定时器功能；我觉得这里使用定时器不是最好的处理方式，同学们有更好的方法请告诉我，谢谢3.第三步就是在滚动的时候获取滚动高度，相应的处理即可，滚动使用到了scroll-view自带事件，这个事件会返回滚动的距离，及其方便

constlistHeight=this.data.listHeight//当滚动到顶部，scrollY0if(scrollY==0||scrollY0){this.setData({currentIndex:0,fixedTitle:''})return}//在中间部分滚动for(leti=0;ilistHeight.length-1;i++){letheight1=listHeight[i]letheight2=listHeight[i+1]if(scrollY=height1&&scrollYheight2){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":"AlanWalker(艾伦·沃克)",},]

12.如果你们还需要其他的参数，对应的在后面加上即可。

END

13.如果想看完整代码，请戳GITHUB欢迎star欢迎关注我的个人博客

14.如果有疑问，欢迎提问