找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索本站精品资源

首页 教程频道 小程序开发 查看内容

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

作者:模板之家 2018-1-25 09:21 2654人关注

在做这块内容的时候看了这篇文章,所以转过来跟大家分享。 业务:后台api提供姓名数据 前台实现类似微信通讯录的功能参照:http://www.wxapp-union.com/forum.php?mod=viewthreadtid=1328 自己服务

在做这块内容的时候看了这篇文章,所以转过来跟大家分享。

 

业务:后台api提供姓名数据 前台实现类似微信通讯录的功能参照:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1328 
自己服务器返回数据格式:[{ "RealName": "taa" }, { "RealName": "曹鸿伟" }] 当然数据有上千个姓名 
效果图如下: 

 
第一步:我在网上找了一个GB的文字库,如下图(很多截图一部分) 
  
这样基本的素材我们就有了:

 

 

下面说一下思路:

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

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

下面是处理姓名: 曹鸿伟----》caohongwei 

 

下面是返回 :

 

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

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

路过

雷人

握手

鲜花

鸡蛋
原作者: 模板之家 来自: 网络收集

全部回复(0)