如何实现仿iPhone通讯录小程序中的自定义选择组件功能？

本文共计2566个文字，预计阅读时间需要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>

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

<view class="header"> // 这里或许有人要问，为啥不用小程序的label组件呢。