欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-01-11 22:50:28
最近模仿微信通信录做了个小程序组件,分享给大家,具体如下: 效果图 因为是使用的手机录屏,视频格式为mp4,上传到文章时发现只支持图片,还好电脑自动录屏功能,所以简...

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

效果图

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

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

特色功能介绍

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

 实现基础

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

wxml

滚动区域

<scroll-view scroll-y style="height:100%;white-space:nowrap;" 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>

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

2.侧面字母导航

<view class="list-shortcut">
 <block wx:for="{{logs}}">
  <text class="{{currentindex===index?'current':''}}" data-id="{{item.title}}" bindtap='scrolltoview'>{{item.title}}</text>
 </block>
</view>

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

<view class="list-fixed {{fixedtitle=='' ? 'hide':''}}" style="transform:translate3d(0,{{fixedtop}}px,0);">
  <view class="fixed-title">
   {{fixedtitle}}
  </view>
</view>

js

渲染参数

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)

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

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

对滚动事件进行处理

const listheight = this.data.listheight
// 当滚动到顶部,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
 }
}
// 当滚动到底部,且-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 (艾伦·沃克)",
  },
]

最后

完整代码请戳 github

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