编程语言
首页 > 编程语言> > 小程序超实用组件:仿微信通讯录

小程序超实用组件:仿微信通讯录

作者:互联网

效果图

图片描述

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

特色功能介绍

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

实现基础

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

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>

Wxss

样式太简单了,就不发了,重点看js部分

clipboard.png

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

将用户数据分为两大块,即热门组和不热门组(开个玩笑

标签:index,滚动,name,title,map,通讯录,组件,仿微信
来源: https://www.cnblogs.com/10manongit/p/12697047.html