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

时间：2022-06-25 15:40:00 编辑：袖梨来源：一聚教程网

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

效果图

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

特色功能介绍

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

实现基础

本组件只使用了小程序基础组件中的scroll-view，不用那么麻烦，简单方便，一看就懂，哈哈哈

wxml

滚动区域


 
  {{group.title}}
  
   
    
    {{user.name}}

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

2.侧面字母导航


 
  {{item.title}}

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


  
   {{fixedTitle}}

渲染参数

normalizeSinger(list) {
  //列表渲染
  let map = {
   hot: {
    title: this.data.HOT_NAME,
    items: []
   }
  }
  list.forEach((item, index) => {
   if (index  {
   return a.title.charCodeAt(0) - b.title.charCodeAt(0)
  })
  return hot.concat(ret)
 },

计算分组高度

var lHeight = [],
  that = this;
let ;
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

在获取元素属性上，小程序提供了一个很方便的api，wx.createSelectotQuery();具体使用方法请看[节点信息API][3]
使用该方法获取到各分组的高度，存入lHeight中用于之后滚动时判断使用；
同学们可以看到我在将lHeight赋值给data的listHeight时使用了定时器，这是因为获取节点信息api是异步执行的，顾你直接进行赋值是没有效果的，所以我使用了定时器功能；

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

对滚动事件进行处理

const listHeight = this.data.listHeight
// 当滚动到顶部，scrollY= height1 && scrollY

参数格式

list:[
  {
    "index": "X",
    "name": "薛之谦",
  },
  {
    "index": "Z",
    "name": "周杰伦",
  },
  {
    "index": "B",
    "name": "BIGBANG (빅뱅)",
  },
  {
    "index": "B",
    "name": "陈奕迅",
  },
  {
    "index": "L",
    "name": "林俊杰",
  },
  {
    "index": "A",
    "name": "Alan Walker (艾伦·沃克)",
  },
]

最后

完整代码请戳

推荐专题

最新下载

热门教程

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

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程