用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实用组件/插件 查看内容

微信小程序通讯录功能实现思路分享

天下雪 2017-2-15 10:31

发个贴冒个泡!!!! 业务:后台api提供姓名数据 前台实现类似微信通讯录的功能参照:http://www.wxapp-union.com/forum.php?mod=viewthreadtid=1328 自己服务器返回数据格式:当然数据有上千个姓名 效果图如下: . ...

发个贴冒个泡!!!! 
images.jpgQQ图片20170215095118.jpg

业务:后台api提供姓名数据 前台实现类似微信通讯录的功能参照:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1328 
自己服务器返回数据格式:[{ "RealName": "taa" }, { "RealName": "曹鸿伟" }] 当然数据有上千个姓名 
效果图如下: 
QQ截图20170214142459.png 
第一步:我在网上找了一个GB的文字库,如下图(很多截图一部分) 
QQ截图20170215092712.png 
这样基本的素材我们就有了:

下面说一下思路:

第一我们还是先来后面js:

思路------》 
[{ "RealName": "taa" }, { "RealName": "曹鸿伟" }] 
这个数组传入getdata函数,getdata函数处理 taa,曹鸿伟 这些姓名成 taa,caohongwei 然后进行sort 排序,现在整个姓名的排序完成,参照上面社区中的demo 我们需要返回一个 这样的数组(这个根据个人习惯来) 
[{'groupname':'C','users':[{'曹鸿伟'},{'曹丽华'}]}] ,

下面是处理姓名: 曹鸿伟----》caohongwei 
QQ截图20170215092929.png

下面是返回 :

  1. [{'groupname':'C','users':[{'曹鸿伟'},{'曹丽华'}]},{'groupname':'Z','users':[{'张三'},{'张华'}]} ]

QQ截图20170215093012.png 
前台来说没什么问题: 
QQ截图20170215094505.png 
重要的一点:scroll-view 中属性 scroll-into-view=“” 这个想要实现效果一定有个固定的高度而不是什么100%之类的百分比,这个从文档上我们也可以看出,所以我们注意 在组件样式中要把height设置全屏,这个之前是没有办法的,记得以前设备的信息API并没有,但是现在可以获取windowHeight,我们吧这个值赋给scroll-view就可以了。

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: hongweicao

相关阅读

  • 天下雪 2017-2-15 10:22
    感谢楼主分享;
    有思路,有代码,很不错
  • hongweicao 2017-2-15 11:07
    天下雪 发表于 2017-2-15 10:22
    感谢楼主分享;
    有思路,有代码,很不错

    本来想上源码的,但是想想,这里还是给大家一个实践的机会,就写了一点思路上了部分主要的代码
  • shier青 2017-12-25 10:41
    楼主你好,能帮忙提供源码参考么
  • pay100 2017-12-26 08:59
    这个好  多发点这样的
  • w™Davey10 2018-8-9 16:20
    感觉不是很严谨,右侧字母应该根据姓名有无显示,不应该全部都有