微信小程序仿写手机通讯录，实现数据分组、排序、展示。右侧栏字母可点击，跳转到对应的分组数据，左侧内容区显示每个字母分组的内容。
话不多说直接上地址：https://github.com/Only0129/address-book.git

页面简单布局：

<!--index.wxml-->
<view class="page">
    <view class="content">
        <!-- 左侧内容区 -->
        <scroll-view class="person-list" enable-back-to-top style="height: {{oHeight}}px" scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true">
            <view class="person" wx:for="{{personList}}" wx:key="index" id="{{ 'inToView'+item.id}}">
                <view class="person-sign">{{item.sign}}</view>
                <view class="person-content">
                    <view class="person-cont {{item.name.length > 1 ? 'border' : ''}}" bindtap="choose" data-item="{{it}}" wx:for="{{item.name}}" wx:key="id" wx:for-item="it">
                        <image class="person-head" src="{{it.head_img ? it.head_img : default_img}}"></image>
                        <text class="person-name">{{it.name}}</text>
                    </view>
                </view>
            </view>
        </scroll-view>
        <!-- 左侧字母栏 -->
        <scroll-view class="letter-list">
            <view class="letter" wx:for="{{personList}}" wx:key="index" catchtap="chooseLetter" data-item="{{item}}">{{item.sign}}</view>
        </scroll-view>
    </view>
</view>

插件js逻辑：

外部js，pinyin.js（js文件放在github上面，链接如上），调用其中的方法ChineseToPinYin，外部js中的ChineseToPinYin方法中有chineseToPinYin、arrSearch、UpFirstCode三个方法，嵌套调用，传入名称返回名称中每个汉字拼音首字母都大写的汉语拼音。
1、方法chineseToPinYin主要作用：
判断传入的名称是否是汉字，做出相关的处理
2、方法arrSearch主要作用：
通过for in方法在PinYinObj对象中匹配对应的汉字，返回汉字的拼音
3、方法UpFirstCode主要作用：
对第二步传入的汉字拼音做以处理，将首字母变为大写

index.js逻辑

1、引入外部插件js，获取方法，在本实例中使用；
2、函数list用于处理对应的数据，调用ChineseToPinYin方法，获取汉字的拼音，并截取第一个字母作为分组标志位；
3、对于初次分组的结果需要进行二次处理，汉语中没有以字母I、字母V开头的汉字，以及一些情况下会出现特殊字符、数字等情况，此处需要进行特殊处理，使用标志位的ASCII码值进行判断；
4、点击右侧字母时，滑动效果通过微信小程序原生的scroll-view实现；
* (1) enable-back-to-top，点击标题回弹
* (2) scroll-into-view="{{toView}}"，滚动到id为toView的位置,动态设置该id即起到切换的左右
* (3) scroll-y="true"，y轴方向滚动
* (4) scroll-with-animation="true"，滚动动画
* 注：在使用scroll-view时：必须给当前盒子设置固定的高度，否则无法生效，此处采用获取设备高度来动态赋值的方法设置固定高度。
小案例的文件在github：https://github.com/Only0129/address-book.git