如何将仿iPhone通讯录制作小程序中的自定义选择组件改写为长尾关键词？

本文共计2605个文字，预计阅读时间需要11分钟。

前言：近期闲暇时光无所事事，想着闲着也是闲着，不如给自己找点事情做！于是，我选择了一个给微信小程序做一个仿iPhone通讯录+效果的定制组件。

首先，整体梳理一下，需要实现的核心功能有：仿iPhone通讯录界面、搜索功能、添加联系人、编辑联系人等。接下来，详细说明一下每个功能的实现方法。

前言

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

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

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

基本上分为3块：

1. 顶部的搜索区域；
2. 内容的展示区域；
3. 侧边字母导航栏区域；

// index.wxml <view class="main"> <!-- 顶部搜索区域 --> <view class="header"> </view> <!-- 内容区域 --> <scroll-view class="scroll"> </scroll-view> <!-- 侧边导航 --> <view class="sub_nav"> </view> </view>

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