微信小程序精品组件：联系人右侧拼音导航

cyk · 发表于 2017-1-11 17:29:36

本帖最后由 cyk 于 2017-1-11 18:08 编辑

看到电话联系人界面，突然就想到了小程序，想着就准备弄一个，折腾折腾

：

本来一开始准备直接传一组数据进去，然后转为拼音，再自动按拼音首字母分组，后来。。。就没有后来了。。。
不过拼音提取插件（网上找的，可是找不到出处了，在此先感谢undefined）已经放在utils文件夹里面了，有兴趣的同学可以鼓捣下，弄了好分享下呢。

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

因为想使用scroll-into-view，所以采用了scroll-view，所以会有一个滚动条，若有强迫症的，也可以使用定位来做；
touch是计算触摸点是否落在某个字母相对位置的区间范围内，为真则添加样式并改变scroll-into-view的值

核心代码示例：
[mw_shl_code=applescript,true]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();
  }
})[/mw_shl_code]

游客，如果您要查看本帖隐藏内容请回复

jj576097 · 发表于 2018-1-17 13:45:12

啥也不说了，感谢楼主分享哇！

chenyanwen89 · 发表于 2018-1-19 10:04:18

感谢楼主

testbee · 发表于 2018-1-21 19:59:18

不错很喜欢

jiaoxuchen · 发表于 2018-1-29 17:38:30

好帖子一定要分享

lfy60209 · 发表于 2018-2-1 14:20:10

厉害啊谢谢分享

xiaoyongguan · 发表于 2018-2-5 21:28:45

sdfsdfsdfsdf

咫尺_佳鹏 · 发表于 2018-2-6 14:41:48

66666

mutou · 发表于 2018-2-7 10:45:52

顶一个6666

twoheard · 发表于 2018-2-21 22:48:06

啥也不说了，感谢楼主分享哇！

		自动登录	找回密码
密码			立即注册

微信小程序精品组件：联系人右侧拼音导航

本帖子中包含更多资源

优秀版主