小程序联系人右侧拼音导航

[复制链接]
hyt_xcx手机认证 实名认证 视频认证 发表于 2016-12-11 17:19:22 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
看到电话联系人界面,突然就想到了小程序,想着就准备弄一个,折腾折腾
  • 本来一开始准备直接传一组数据进去,然后转为拼音,再自动按拼音首字母分组,后来。。。就没有后来了。。。
  • 不过拼音提取插件(网上找的,可是找不到出处了,在此先感谢undefined)已经放在utils文件夹里面了,有兴趣的同学可以鼓捣下,弄了好分享下呢。

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

  • 因为想使用scroll-into-view,所以采用了scroll-view,所以会有一个滚动条,若有强迫症的,也可以使用定位来做;
  • touch是计算触摸点是否落在某个字母相对位置的区间范围内,为真则添加样式并改变scroll-into-view的值
11111.gif
  1. Page({
  2.   data:{
  3.     // 当前选择的导航字母
  4.     selected: 0,
  5.     // 选择字母视图滚动的位置id
  6.     scrollIntoView: 'A',
  7.     // 导航字母
  8.     letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
  9.     'U', 'V', 'W', 'X', 'Y', 'Z'],
  10.     groups: [{
  11.         groupName: 'A',
  12.         users: [
  13.           {
  14.             name: '阿码',
  15.             avatar: '../../images/avatar.png'
  16.           }
  17.         ]
  18.       },
  19.       {
  20.         groupName: 'B',
  21.         users: [
  22.           {
  23.             name: '白娘子',
  24.             avatar: '../../images/avatar.png'
  25.           },
  26.           {
  27.             name: '包天齐',
  28.             avatar: '../../images/avatar.png'
  29.           }
  30.         ]
  31.       },
  32.       {
  33.         groupName: 'C',
  34.         users: [
  35.           {
  36.             name: '陈大年',
  37.             avatar: '../../images/avatar.png'
  38.           },
  39.           {
  40.             name: '丛云山',
  41.             avatar: '../../images/avatar.png'
  42.           },
  43.           {
  44.             name: '崔鸣贵',
  45.             avatar: '../../images/avatar.png'
  46.           }
  47.         ]
  48.       },
  49.       {
  50.         groupName: 'D',
  51.         users: [
  52.           {
  53.             name: '邓牛牛',
  54.             avatar: '../../images/avatar.png'
  55.           },
  56.           {
  57.             name: '刁仁衣',
  58.             avatar: '../../images/avatar.png'
  59.           },
  60.           {
  61.             name: '杜长城',
  62.             avatar: '../../images/avatar.png'
  63.           }
  64.         ]
  65.       },
  66.       {
  67.         groupName: 'F',
  68.         users: [
  69.           {
  70.             name: '范长龙',
  71.             avatar: '../../images/avatar.png'
  72.           },
  73.           {
  74.             name: '冯肖晓',
  75.             avatar: '../../images/avatar.png'
  76.           }
  77.         ]
  78.       },
  79.       {
  80.         groupName: 'G',
  81.         users: [
  82.           {
  83.             name: '甘地',
  84.             avatar: '../../images/avatar.png'
  85.           },
  86.           {
  87.             name: '高墙',
  88.             avatar: '../../images/avatar.png'
  89.           },
  90.           {
  91.             name: '宫都举',
  92.             avatar: '../../images/avatar.png'
  93.           }
  94.         ]
  95.       },
  96.       {
  97.         groupName: 'H',
  98.         users: [
  99.           {
  100.             name: '何芸',
  101.             avatar: '../../images/avatar.png'
  102.           },
  103.           {
  104.             name: '胡坨坨',
  105.             avatar: '../../images/avatar.png'
  106.           },
  107.           {
  108.             name: '黄坨坨',
  109.             avatar: '../../images/avatar.png'
  110.           }
  111.         ]
  112.       },
  113.       {
  114.         groupName: 'T',
  115.         users: [
  116.           {
  117.             name: '谭老头儿',
  118.             avatar: '../../images/avatar.png'
  119.           },
  120.           {
  121.             name: '汤云西',
  122.             avatar: '../../images/avatar.png'
  123.           },
  124.           {
  125.             name: '图图',
  126.             avatar: '../../images/avatar.png'
  127.           }
  128.         ]
  129.       },
  130.       {
  131.         groupName: 'X',
  132.         users: [
  133.           {
  134.             name: '夏一天',
  135.             avatar: '../../images/avatar.png'
  136.           },
  137.           {
  138.             name: '鲜轰轰',
  139.             avatar: '../../images/avatar.png'
  140.           },
  141.           {
  142.             name: '谢大佩',
  143.             avatar: '../../images/avatar.png'
  144.           }
  145.         ]
  146.       }
  147.     ]
  148.   },
  149.   onLoad:function(options){
  150.     const res = wx.getSystemInfoSync(),
  151.           letters = this.data.letters;
  152.     // 设备信息
  153.     this.setData({
  154.       windowHeight: res.windowHeight,
  155.       windowWidth: res.windowWidth,
  156.       pixelRatio: res.pixelRatio
  157.     });
  158.     // 第一个字母距离顶部高度,单位使用的是rpx,须除以pixelRatio,才能与touch事件中的数值相加减,css中定义nav高度为94%,所以 *0.94
  159.     const navHeight = this.data.windowHeight * 0.94, //
  160.           eachLetterHeight = navHeight / 26,
  161.           comTop = (this.data.windowHeight - navHeight) / 2,
  162.           temp = [];

  163.     this.setData({
  164.       eachLetterHeight: eachLetterHeight
  165.     });

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

  167.     for(let i = 0, len = letters.length; i < len; i++) {
  168.       const x = this.data.windowWidth - (10 + 50) / this.data.pixelRatio,
  169.             y = comTop + (i * eachLetterHeight);
  170.       temp.push([x, y]);
  171.     }
  172.     this.setData({
  173.       lettersPosition: temp
  174.     })
  175.   },
  176.   tabLetter(e) {
  177.     const index = e.currentTarget.dataset.index;
  178.     this.setData({
  179.       selected: index,
  180.       scrollIntoView: index
  181.     })
  182.      
  183.     this.cleanAcitvedStatus();
  184.   },
  185.   // 清除字母选中状态
  186.   cleanAcitvedStatus() {
  187.     setTimeout(() => {
  188.       this.setData({
  189.           selected: 0
  190.       })
  191.     }, 500);
  192.   },
  193.   touchmove(e) {
  194.     const x = e.touches[0].clientX,
  195.           y = e.touches[0].clientY,
  196.           lettersPosition = this.data.lettersPosition,
  197.           eachLetterHeight = this.data.eachLetterHeight,
  198.           letters = this.data.letters;
  199.     console.log(y);
  200.     // 判断触摸点是否在字母导航栏上
  201.     if(x >= lettersPosition[0][0]) {
  202.       for(let i = 0, len = lettersPosition.length; i < len; i++) {
  203.         // 判断落在哪个字母区域,取出对应字母所在数组的索引,根据索引更新selected及scroll-into-view的值
  204.         const _y = lettersPosition[i][1], // 单个字母所处高度
  205.               __y = _y + eachLetterHeight; // 单个字母最大高度取值范围, 50为字母高50rpx
  206.         if(y >= _y && y <= __y) {
  207.            this.setData({
  208.             selected: letters[i],
  209.             scrollIntoView: letters[i]
  210.           });
  211.           break;
  212.         }
  213.       }
  214.     }
  215.   },
  216.   touchend(e) {
  217.     this.cleanAcitvedStatus();
  218.   }
  219. })
复制代码
项目地址:
游客,如果您要查看本帖隐藏内容请回复


回复

使用道具 举报

精彩评论1

GODOG 发表于 2017-5-22 14:26:01 | 显示全部楼层
谢谢分享
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

专注源码分享,教程分享
全国服务电话

187-8198-7163

周一至周8:00-22:00

反馈建议

cdhaoyt@163.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.2© 2001-2013 Comsenz Inc.( 蜀ICP备16032957号-1