使用APICloud|使用APICloud AVM框架封装通讯录组件使用APICloudAVM框架封装通讯录组

【使用APICloud|使用APICloud AVM框架封装通讯录组件】由于很多项目中都会用到通讯录，所有就封装了一个通讯录的组件，实现了可通过字母检索，拨打电话功能。
效果展示

文章图片

用的技术点是scroll-view中的scrollTo方法。

文章图片

向组件中传值和监听子组件事件，具体使用可参考官方文档

文章图片

数据格式

[{ "zkey": "A", "children": [{ "name": "安强", "phone": "11111111111", "zkey": "A" }] }, { "zkey": "B", "children": [{ "name": "边亮", "phone": "11111111111", "zkey": "B" }, { "name": "白菊", "phone": "11111111111", "zkey": "B" }, { "name": "贺之", "phone": "11111111111", "zkey": "B" }, { "name": "白梓", "phone": "11111111111", "zkey": "B" }, { "name": "卜军", "phone": "11111111111", "zkey": "B" }] }]

组件代码

.page { height: 100%; background-color: #ffffff; } .nav{ margin: 0 10px; padding: 0 10px; } .nav-title{ font-size: 20px; } .box{ flex-flow: row nowrap; justify-content: flex-start; align-items: center; margin: 10px; border-bottom: 1px solid #ccc; padding-bottom: 10px; } .right{ padding-left: 20px; } .bt{ flex-flow: row nowrap; justify-content: flex-start; align-items: center; } .bt-position{ font-size: 14px; color: #666666; } .bt-part{ font-size: 14px; color: #666666; padding-left: 20px; } .right-nav{ position: absolute; right: 10px; width: 30px; padding: 30px 0; height: 100%; align-items: center; } .right-nav-item{ padding-bottom: 5px; } .right-nav-item-on{ color: #035dff; } .right-nav-item-off{ color: #666666; } .avator{ width: 30px; padding: 5px; }