小程序仿微信通讯录

var config = require('../../../config.js')
var app = getApp();


Page({
  data: {
    alpha: [{ letter: 'A' }, { letter: 'B' }, { letter: 'C' }, { letter: 'D' }, { letter: 'E' }, { letter: 'F' }, { letter: 'G' }, { letter: 'H' }, { letter: 'I' }, { letter: 'J' }, { letter: 'K' }, { letter: 'L' }, { letter: 'M' }, { letter: 'N' }, { letter: 'O' }, { letter: 'P' }, { letter: 'Q' }, { letter: 'R' }, { letter: 'S' }, { letter: 'T' }, { letter: 'U' }, { letter: 'V' }, { letter: 'W' }, { letter: 'X' }, { letter: 'Y' }, { letter: 'Z'}],
    showBubble: false,
    listData: [],
    sortData: [],
    toView: null,
    isLoading: false
  },


  onLoad: function (options) {
    this.getData()
  },


  // 触摸右侧字母表知道触摸的是谁
  alphaStart: function (e) {
    var index = e.currentTarget.dataset.index


    for(var i=0; i<this.data.sortData.length; i++) {
      this.data.highlightLetter = this.data.alpha[index].letter
      if (this.data.sortData[i].letter.indexOf(this.data.alpha[index].letter) != -1) {
        this.data.toView = 'to' + this.data.sortData[i].letter
        this.setData({
          toView: this.data.toView
        }) 
      } 
    }
    
    this.data.showBubble = true
    this.setData({
      showBubble: this.data.showBubble,
      highlightLetter: this.data.highlightLetter
    })
  },
  
  alphaEnd: function (e) {
    this.setAlphaBeta()
    this.data.showBubble = false
    this.setData({
      showBubble: this.data.showBubble
    })
  },


  // ======================


  // 获取作者列表数据
  getData() {
    this.data.isLoading = true
    wx.showNavigationBarLoading()


    var that = this
    try {
      var userId = config.getUserInfo().id
      var accessToken = config.getAuthorization()
    } catch (e) {
    }
    if (accessToken == null) {
      wx.hideNavigationBarLoading() //完成停止加载
      wx.stopPullDownRefresh() //停止下拉刷新
      wx.navigateTo({
        url: yourUrl
      })
      return
    }
    wx.request({
      url: yourUrl,
      method: 'GET',
      data: {
        include: yourData,
      },
      header: {
        header: yourHeader
      },
      complete: res => {
        console.log(res)


        wx.hideNavigationBarLoading()
        wx.stopPullDownRefresh()
        this.data.isLoading = false


        this.data.listData = res.data.data
        var authorList = res.data.data
        var authorSortArray = []
        for (var i = 0; i < authorList.length; i++) {
          authorSortArray.push(authorList[i])
        }
        this.data.sortData = authorSortArray
        this.data.sortData = this.pySegSort(this.data.sortData)
        this.setData({
          listData: this.data.listData,
          sortData: this.data.sortData
        })
      }
    })
  },


  // 拼音排序方法
  pySegSort(arr) {
    if(!String.prototype.localeCompare)
    return null;


    var letters = "*abcdefghjklmnopqrstwxyz".split('');
    var zh = "阿八嚓哒妸发旮哈讥咔垃麻拏噢妑七呥扨它穵夕丫帀".split('');


    var segs = [];
    var curr;
    letters.forEach(function (item, i) {
      item = item.toUpperCase()
      curr = { letter: item, data: [] };
      for(var j = 0; j<arr.length; j++) {
        var firstCharacter = arr[j].nickname.slice(0,1)
        var pattern = /^[\u4E00-\u9FA5]{1,5}$/
        if(pattern.test(firstCharacter)) {
          // 注意，这里一定要加zh，不然谷歌某些高版本浏览器里面会出现排序乱套的情况
          if ((!zh[i - 1] || zh[i - 1].localeCompare(arr[j].nickname, 'zh') <= 0) && arr[j].nickname.localeCompare(zh[i], 'zh') == -1) {
            curr.data.push(arr[j])
          }
        } else {
          var strExp = /^[A-Za-z]+$/
          if (strExp.test(firstCharacter)) {
            if (item === firstCharacter.toUpperCase()) {
              curr.data.push(arr[j])
            }
          }
        }
      }


      if (curr.data.length) {
        curr.data.sort(function (a, b) {
          return a.nickname.localeCompare(b.nickname);
        });
        segs.push(curr);
      }
    })
    return segs;
  },


  // 字母表导航初始化active
  setAlphaBeta () {
    for (var i = 0; i < this.data.alpha.length; i++) {
      this.data.alpha[i].active = false
    }
    this.setData({
      alpha: this.data.alpha
    })
  }
})




渲染页面的数据格式
sort: [
  0: {
    letter: A,
    data: [
      0: {
        id: 123456,
        nickname: 'hello kitty',
        avatar: 'no-avatar'
      }
    ]
  },
  1: {
    letter: B,
    data: [
      0: {
        id: 123456,
        nickname: 'hello kitty',
        avatar: 'no-avatar'
      }
    ]
  },

]

 

当时还考虑了借鉴微信，在右侧字母表上滑动时候，跳转到对应字母的位置，大体思路是，用bindmove事件，获取当前触摸点相对于屏幕的垂直距离，计算位置对于每个字母行高的位置，得出当前触摸的是哪个字母，这样子做，导致了频繁的setData，进而导致计算延迟，效果鬼畜，各位小程序大神如果有做出来类似效果的，期待深刻交流，膜拜。