微信小程序自定义类似微信联系人组件

微信小程序自定义联系人弹窗

在小程序项目中需要有一个选择人员项，想着看着好看一些，所以做成类似微信联系人的界面，由于本人是后端人员，效果不是特别好看，ui使用的是weui

效果图如下：

使用的是小程序自定义组件，自定义组件同样需要有js、wxss、json、wxml四个文件，
如何使自定义的组件，需要在json文件中声明

{
  "component": true
}

js文件中使用的Component构造器而不是Pge构造器，其中properties属性中声明组件中对外暴露的属性，该组件中暴漏了两个属性：
show:布尔值，控制联系人组件是否显示，
list：数组，联系人组件需要显示的人员，效果图左侧的字母导航栏组件中已经处理过了，基本汉字处理没有问题，会根据对象中name属性提取首字母，将数组进行排序分组，只需要传入原生数组即可
数组的是多个Object对象，该对象需必备两个属性：

{
	name: "火男", //联系人显示的名称
	photo: "http://aaa/img.png"//联系人的头像，如果不指定，会使用默认的图片
}

组件通信，设置三个事件回调函数

cancle： 组件上方搜索栏取消按钮回调
select：选中某个联系人后的回调，会将选中的人员对象发送到父组件中
confirmInput：上方搜索框键盘按下完成后的回调，会将输入框中的值发送到父组件中

使用方法：
在组件标签中使用bindselect="",bindconfirmInput="",bindcancle=""绑定父组件中的回调
js文件：

var pinyin = require('./pinyin.js')

Component({

  /**
   * 组件的属性列表
   */
  properties: {
    //是否显示联系人
    show: {
      type: Boolean,
      value: false
    },
    //用户数组
    list: {
      type: Array,
      value: []
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    nav: [],
    showList: []
  },
  observers: {
    'list': function(list) {
      console.log('更新人员数据：', list)
      for (let user of list) {
        user['pinyin'] = pinyin.py.get(user.name).p
        if (!Boolean(user.photo)) {
          user['photo'] = "./resources/images/photo-boy.png";
        }
      }

      var newlist = [];
      var nav = [];
      if (this.data.list.length > 0) {
        var sortUsers = pinyin.py.dataLetterSort(this.data.list, 'pinyin')
        for (let key in sortUsers) {
          var obj = {};
          obj['title'] = key,
          obj['l