微信小程序实用组件:联系人右侧拼音导航

2017-01-04

看到电话联系人界面,突然就想到了小程序,想着就准备弄一个,折腾折腾微信小程序实用组件:联系人右侧拼音导航

  • 本来一开始准备直接传一组数据进去,然后转为拼音,再自动按拼音首字母分组,后来。。。就没有后来了。。。

  • 不过拼音提取插件(网上找的,可是找不到出处了,在此先感谢微信小程序实用组件:联系人右侧拼音导航)已经放在utils文件夹里面了,有兴趣的同学可以鼓捣下,弄了好分享下呢。


现在支持单击字母和滑动导航栏查询联系人;
主要实现方式

  • 因为想使用scroll-into-view,所以采用了scroll-view,所以会有一个滚动条,若有强迫症的,也可以使用定位来做;

  • touch是计算触摸点是否落在某个字母相对位置的区间范围内,为真则添加样式并改变scroll-into-view的值


微信小程序实用组件:联系人右侧拼音导航



核心代码示例:

Page({
  data:{
    // 当前选择的导航字母
    selected: 0,
    // 选择字母视图滚动的位置id
    scrollIntoView: 'A',
    // 导航字母
    letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
    'U', 'V', 'W', 'X', 'Y', 'Z'],
    groups: [{
        groupName: 'A',
        users: [
          {
            name: '阿码',
            avatar: '../../images/avatar.png'
          }
        ]
      },
      {
        groupName: 'B',
        users: [
          {
            name: '白娘子',
            avatar: '../../images/avatar.png'
          },
          {
            name: '包天齐',
            avatar: '../../images/avatar.png'
          }
        ]
      },
      {
        groupName: 'C',
        users: [
          {
            name: '陈大年',
            avatar: '../../images/avatar.png'
          },
          {
            name: '丛云山',
            avatar: '../../images/avatar.png'
          },
          {
            name: '崔鸣贵',
            avatar: '../../images/avatar.png'
          }
        ]
      },
      {
        groupName: 'D',
        users: [
          {
            name: '邓牛牛',
            avatar: '../../images/avatar.png'
          },
          {
            name: '刁仁衣',
            avatar: '../../images/avatar.png'
          },
          {
            name: '杜长城',
            avatar: '../../images/avatar.png'
          }
        ]
      },
      {
        groupName: 'F',
        users: [
          {
            name: '范长龙',
            avatar: '../../images/avatar.png'
          },
          {
            name: '冯肖晓',
            avatar: '../../images/avatar.png'
          }
        ]
      },
      {
        groupName: 'G',
        users: [
          {
            name: '甘地',
            avatar: '../../images/avatar.png'
          },
          {
            name: '高墙',
            avatar: '../../images/avatar.png'
          },
          {
            name: '宫都举',
            avatar: '../../images/avatar.png'
          }
        ]
      },
      {
        groupName: 'H',
        users: [
          {
            name: '何芸',
            avatar: '../../images/avatar.png'
          },
          {
            name: '胡坨坨',
            avatar: '../../images/avatar.png'
          },
          {
            name: '黄坨坨',
            avatar: '../../images/avatar.png'
          }
        ]
      },
      {
        groupName: 'T',
        users: [
          {
            name: '谭老头儿',
            avatar: '../../images/avatar.png'
          },
          {
            name: '汤云西',
            avatar: '../../images/avatar.png'
          },
          {
            name: '图图',
            avatar: '../../images/avatar.png'
          }
        ]
      },
      {
        groupName: 'X',
        users: [
          {
            name: '夏一天',
            avatar: '../../images/avatar.png'
          },
          {
            name: '鲜轰轰',
            avatar: '../../images/avatar.png'
          },
          {
            name: '谢大佩',
            avatar: '../../images/avatar.png'
          }
        ]
      }
    ]
  },
  onLoad:function(options){
    const res = wx.getSystemInfoSync(),
          letters = this.data.letters;
    // 设备信息
    this.setData({
      windowHeight: res.windowHeight,
      windowWidth: res.windowWidth,
      pixelRatio: res.pixelRatio
    });
    // 第一个字母距离顶部高度,单位使用的是rpx,须除以pixelRatio,才能与touch事件中的数值相加减,css中定义nav高度为94%,所以 *0.94
    const navHeight = this.data.windowHeight * 0.94, //
          eachLetterHeight = navHeight / 26,
          comTop = (this.data.windowHeight - navHeight) / 2,
          temp = [];

    this.setData({
      eachLetterHeight: eachLetterHeight
    });

    // 求各字母距离设备左上角所处位置

    for(let i = 0, len = letters.length; i < len; i++) {
      const x = this.data.windowWidth - (10 + 50) / this.data.pixelRatio,
            y = comTop + (i * eachLetterHeight);
      temp.push([x, y]);
    }
    this.setData({
      lettersPosition: temp
    })
  },
  tabLetter(e) {
    const index = e.currentTarget.dataset.index;
    this.setData({
      selected: index,
      scrollIntoView: index
    })
   
    this.cleanAcitvedStatus();
  },
  // 清除字母选中状态
  cleanAcitvedStatus() {
    setTimeout(() => {
      this.setData({
          selected: 0
      })
    }, 500);
  },
  touchmove(e) {
    const x = e.touches[0].clientX,
          y = e.touches[0].clientY,
          lettersPosition = this.data.lettersPosition,
          eachLetterHeight = this.data.eachLetterHeight,
          letters = this.data.letters;
    console.log(y);
    // 判断触摸点是否在字母导航栏上
    if(x >= lettersPosition[0][0]) {
      for(let i = 0, len = lettersPosition.length; i < len; i++) {
        // 判断落在哪个字母区域,取出对应字母所在数组的索引,根据索引更新selected及scroll-into-view的值
        const _y = lettersPosition[1], // 单个字母所处高度
              __y = _y + eachLetterHeight; // 单个字母最大高度取值范围, 50为字母高50rpx
        if(y >= _y && y <= __y) {
           this.setData({
            selected: letters,
            scrollIntoView: letters
          });
          break;
        }
      }
    }
  },
  touchend(e) {
    this.cleanAcitvedStatus();
  }
})

项目地址及下载: 

项目地址:https://github.com/treadpit/wx_pinyin




0
收藏