小程序组件-仿微信通讯录

4,065 阅读3分钟

运用了该组件的小程序开发完成,详情请看HMusic

效果图



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

特色功能介绍

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

实现基础

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

wxml

  1. 滚动区域

<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

  1. 渲染参数

    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)
      },
    

  2. 计算分组高度

    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是异步执行的,顾你直接进行赋值是没有效果的,所以我使用了定时器功能;
    **我觉得这里使用定时器不是最好的处理方式,同学们有更好的方法请告诉我,谢谢**
    

  3. 对滚动事件进行处理

    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

欢迎关注个人博客