经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » 微信小程序 » 查看文章
仿iPhone通讯录制作小程序自定义选择组件的实现
来源:jb51  时间:2019/5/24 9:53:21  对本文有异议

前言

近期闲来无事,想着闲着也是闲着,不如给自己搞点事情做!敢想敢做,于是选择了给微信小程序做个 仿iPhone通讯录 效果的自定义组件。

先来整理一下,瞧瞧需要实现的核心功能。

  1. 按照第一个字的首字母排序;
  2. 实现输入搜索功能;
  3. 侧边栏字母导航;

基本上分为3块:

  1. 顶部的搜索区域;
  2. 内容的展示区域;
  3. 侧边字母导航栏区域;
  1. // index.wxml
  2. <view class="main">
  3. <!-- 顶部搜索区域 -->
  4. <view class="header">
  5. </view>
  6. <!-- 内容区域 -->
  7. <scroll-view class="scroll">
  8. </scroll-view>
  9. <!-- 侧边导航 -->
  10. <view class="sub_nav">
  11. </view>
  12. </view>

【顶部的搜索区域】

一目了然就直接贴代码了。

  1. <view class="header">
  2. // 这里或许有人要问,为啥不用小程序的label组件呢。?_?
  3. // 原因就是...我就不用,你还能咬我?!^(oo)^
  4. // 哈哈哈哈~开个玩笑,其实是小程序的label组件还没支持input!
  5. <view class="label">
  6. <icon></icon>
  7. <input type="text" placeholder="搜索" />
  8. </view>
  9. </view>

【内容的展示区域】

再说一目了然会不会被打呢?:joy:

根据图片就可以看出来,存在2个区域。

  1. 红框包围的外框,负责圈定展示的范围;
  2. 绿框包围的范围,包含有字母标题和对应的子项。

代码如下:

  1. <scroll-view class="scroll">
  2. <view class="dl">
  3. <view class="dt">这里是字母标题。</view>
  4. <view class="dd">
  5. <span>这里当然是展示的内容啦。</span>
  6. </view>
  7. </view>
  8. </scroll-view>

【侧边字母导航栏区域】

为了节省一下文章的篇幅,这里就不贴图了,很简单,就是并排下来就好了。

  1. <view class="sub_nav">
  2. <view class="option">这里是输出字母。</view>
  3. </view>

接下来是wxss的样式了。

考虑到wxss的样式较多,我就直接贴 代码链接 吧,有兴趣的童鞋可以瞧瞧。

完成之后,是时候贴个效果图了。(不许吐槽丑,宝宝会不开心的!:pensive:)

结构样式弄完了,也贴一下自定组件的基础文件

  1. // index.json
  2. {
  3. "component": true
  4. }
  1. // index.js
  2. Component({
  3. properties: {}, // 组件的对外属性
  4. data: {}, // 组件的内部数据
  5. lifetimes: {}, // 生命周期
  6. methods: {} // 事件
  7. });

现在开始实现功能了!!!

按照第一个字的首字母排序

说实话,实现这块功能呢,我是没啥头绪的,所以这个时候就要求助伟大的“度娘/Google”了。

经过楼主“遍寻网络”,查找到如下页面的源码参考:

因楼主问题,遗忘了该网址,如有知道的童鞋,贴个链接告诉下楼主,楼主立马麻溜的加上。 源码的原理大概描述下:

收录 20902 个汉字和 375 个多音字的 Unicode 编码,然后用JS切割首字母并转换成 Unicode 进行对比,最后返回对应首字母的拼音。

  1. // 汉字对应的Unicode编码文件
  2. // oMultiDiff = 多音字 | firstLetterMap = 汉字
  3. import firstStore from './firstChineseLetter';
  4.  
  5. // 获取首字母拼音
  6. function getFirstLetter (val) {
  7. const firstVal = val.charAt(0);
  8. if (/.*[\u4e00-\u9fa5]+.*/.test(firstVal)) {
  9. // 处理中文字符
  10. // 转换成Unicode编码,与firstStore里面的数据进行对比,然后返回对应的参数
  11. const code = firstVal.charCodeAt(0); // 转换成Unicode编码
  12. return code in firstStore.oMultiDiff ? firstStore.oMultiDiff[code] : firstStore.firstLetterMap.charAt(code - 19968);
  13. } else {
  14. // 这里处理非中文
  15. // 检测是否字母,如果是就直接返回大写的字母
  16. // 不是的话,返回“#”
  17. return /^[a-zA-Z]+$/.test(firstVal) ? firstVal.toUpperCase() : '#';
  18. }
  19. }
  20.  
  21. getFirstLetter('东城区');
  22. // 输出结果:D

firstChineseLetter.js地址

获取首字母的方法有了之后,就该对数据进行处理了。

首先定义一下组件所需要的参数。

  1. Component({
  2. // 组件的对外属性
  3. properties: {
  4. data: { type: Array, value: [], }, // 组件外传递进来的数据
  5. attr: { type: String, value: 'label' }, // 需要进行首字母处理的属性,默认是"label"
  6. },
  7. ...
  8. })

然后,针对组件外传递进来的数据,做一次转换。

  1. // 静态数据的存储
  2. const Static = {
  3. list: []
  4. }
  5.  
  6. Component({
  7. ...
  8. methods: {
  9. // 初始/重置数据
  10. init () {
  11. const { data, attr } = this.properties;
  12.  
  13. let changeData = [], // 转换后的数据
  14. inChangeData = {}; // 存储转换后的数据对应字母的索引值
  15. data.map(v => {
  16. // 获取首字母拼音
  17. let firstLetter = this.getFirstLetter(v[attr]);
  18. // 循环对比检测
  19. firstLetter.split('').map(str => {
  20. if (str in inChangeData) {
  21. // 有首字母相同的项,
  22. // 则添加入已有的项里面
  23. changeData[inChangeData[str]].list.push(v);
  24. } else {
  25. // 没有首字母相同的项,
  26. // 则在尾部追加一条新的数据,
  27. // 储存对应的字母值(firstLetter),
  28. // 同时存储该字母对应的索引
  29. changeData.push({ firstLetter: str, list: [v] });
  30. inChangeData[str] = changeData.length - 1;
  31. }
  32. });
  33. });
  34. // 此时转换后的数组属于乱序,
  35. // 需要对乱序的数组进行排序
  36. changeData.sort((pre, next) => pre.firstLetter < next.firstLetter ? -1 : 1);
  37. // 若存在“#”项,将位置位移至底部
  38. if (changeData[0].firstLetter === '#') {
  39. const firstArr = changeData.splice(0, 1);
  40. changeData = [...changeData, ...firstArr];
  41. }
  42.  
  43. // 存储转换后的数据,
  44. // this.data.list的数据对应页面的展示数据,因为有搜索功能,数据可能会变更,
  45. // 在静态的数据里面,也存储1份数据,方便后续的搜索等功能。
  46. this.setData({ list: changeData });
  47. Static.list = changeData;
  48. },
  49. }
  50. ...
  51. });

初始化函数有了之后呢,当然是调用它啦。

  1. Component({
  2. lifetimes: {
  3. // 在组件实例进入页面节点树时执行初始化数据
  4. attached () {
  5. this.init();
  6. }
  7. },
  8. observers: {
  9. // 考虑到组件传递的数据存在变更的可能,
  10. // 在数据变更的时候,也要做一次初始化
  11. 'data, attr, icon' (data, attr) {
  12. this.init();
  13. }
  14. },
  15. })

接下来是搜索功能啦~

先给页面搜索框加个监听事件(input)

  1. <view class="main">
  2. ...
  3. <view class="header">
  4. <view class="label">
  5. <icon></icon>
  6. <input type="text" placeholder="搜索" value="{{ search }}" bindinput="searchData" />
  7. </view>
  8. </view>
  9. ...
  10. </view>

接着是JS的事件

  1. const Static = {
  2. list: []
  3. }
  4.  
  5. Component({
  6. ...
  7. methods: {
  8. searchData (e) {
  9. const { value } = e.detail; // 用户输入的值
  10. const { list } = Static; // init存储的静态数据,用来做数据对比
  11. const { attr } = this.properties; // 要对比的属性值
  12. let result = [], tem = {};
  13. // 没有搜索内容,返回全部内容
  14. if (value.length === 0) { this.setData({ list: Static.list }); return; }
  15.  
  16. // 检索搜索内容
  17. list.map(v => {
  18. // 获取所有跟value匹配上的数据
  19. const searchList = v.list.filter(v => v[attr].indexOf(value) !== -1);
  20. if (searchList.length > 0) {
  21. // 此处原理类似楼上init的对比,此处不细说,
  22. // 反正我懒我有理(0.0)
  23. if (v.firstLetter in tem) {
  24. const _list = result[tem[v.firstLetter]].lish;
  25. result[tem[v.firstLetter]].lish = [..._list, ...searchList];
  26. } else {
  27. result.push({ firstLetter: v.firstLetter, list: [...searchList] });
  28. tem[v.firstLetter] = result.length - 1;
  29. }
  30. }
  31. });
  32. // 存储数据
  33. this.setData({ list: result, search: value });
  34. }
  35. },
  36. ...
  37. });

侧边栏字母导航

(突然觉得,写文好累啊!!!)

写这块的时候呢,楼主发现了iPhone通讯录侧边导航栏有个问题, 手指在字母导航栏上滑动的时候,有时候很难确认自己滑到了哪个区域?!

然鹅这个问题呢,楼主发现了微信的通讯录,针对这块添加了手指滑动的时候,添加了个结构来帮助用户确认目前所处的区域。

楼主本着学习的精神,借(chao)鉴(xi)了这个效果,来个效果图。

贴一下新的wxml结构

  1. <!-- 侧边导航 -->
  2. <view class="sub_nav" id="subNav" catchtouchstart="subTouchStart" catchtouchmove="subTouchMove" catchtouchend="subTouchEnd">
  3. <view class="option" wx:for="{{ list }}" data-firstLetter="{{ item.firstLetter }}" wx:key="firstLetter">
  4. {{ item.firstLetter }}
  5. <!-- 以下这块就是新增的结构啦 S -->
  6. <view
  7. class="max {{ item.firstLetter === scrollIntoView && subNavHint ? 'show' : '' }}"
  8. data-desc="{{ item.firstLetter }}"
  9. ></view>
  10. <!-- 以上这块就是新增的结构啦 E -->
  11. </view>
  12. </view>
  1. const Static = {
  2. list: [],
  3. timer: null
  4. }
  5.  
  6. Component({
  7. ...
  8. data: {
  9. scrollIntoView: '', // 标记当前处于哪个字母
  10. subNavHint: false, // 控制借(chao)鉴(xi)微信效果的元素
  11. },
  12. methods: {
  13. subTouchStart () {
  14. this.setData({ subNavHint: true, scrollIntoView: '' });
  15. },
  16. subTouchEnd () {
  17. this.setData({ subNavHint: false });
  18. },
  19. subTouchMove (e) {
  20. // 获取字母导航栏元素对应的值
  21. const query = this.createSelectorQuery();
  22. query.select('#subNav').boundingClientRect();
  23. query.selectViewport().scrollOffset();
  24. query.exec(res => {
  25. const { clientY } = e.touches[0]; // Y轴的位置
  26. const DomTop = res[0].top; // 导航元素距离顶部的位置
  27. const { list } = this.data;
  28. // 计算索引,
  29. // 或许看到这里有人会疑问,为什么是除以20?
  30. // 因为样式里面,我写的高度是20px,所以每个字母的区域是20px。
  31. let index = Math.round((clientY - DomTop) / 20);
  32. index = index >= list.length ? list.length - 1 : index; // 限制索引大于0
  33. index = index < 0 ? 0 : index; // 限制索引小于0
  34. // 限制结果重复赋值
  35. if (list[index].firstLetter !== this.data.scrollIntoView) {
  36. this.setData({ scrollIntoView: list[index].firstLetter });
  37. // 加个抖动效果
  38. wx.vibrateShort();
  39. }
  40. });
  41. }
  42. },
  43. }
  44. ...
  45. });

结语

文章写到这呢,基本上核心的功能都已经实现啦~ :stuck_out_tongue_closed_eyes:(终于写完了...)

通过自己封装组件,楼主还是有挺大收获的!

当然,这个组件还有很多可以继续完善的地方,有兴趣的童鞋呢,可以提出你的优化建议,楼主有时(xing)间(qu)的话,会继续完善下去。

最后,还是推一下这个组件啦,希望它能帮到有需要的童鞋。

github地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号