今天教大家用一个中继器制作字母分类定位选择器的原型模板，模版我们用中继器制作的，所以使用也很方便，只需要在中继器表格对应位置填写选项信息，即可自动生成交互效果，具体效果可以打开下方预览地址体验。
【原型效果】
- 鼠标点击字母，可以快速到达对应字母开头的选项的位置；
- 可以通过鼠标滚轮上下滚动、或者上下拖动的方式，上下查看更多选项。
【原型预览含下载地址】
++https://axhub.im/ax9/e4f2832e83281a58/++#g++=1&p=++++字母分类选择器++
【制作教程】
1. 材料准备
1.1 手机外壳素材
将准备好的手机壳导入或复制到页面，该素材可以在小程序（Axure高保真原型哦）里免费获取。
1.2 选择器页面材料
主要材料包括动态面板、中继器和矩形文本标签
中继器里有两种矩形，一个是放字母的矩形，另一个是选项的矩形，我们分别将它们放在动态面板的两个状态里。
中继器表格里共两列，zimu列对应字母开头，text列对应选项，将对应的选项填写在对应字母下方即可，如下图所示
再将中继器转为动态面板，调整面板尺寸至适合手机尺寸，再调出滚动条。
然后动态面板外增加A-Z文字标签，设置选中样式（案例中是字体加粗）和单选组，默认选中字母A，摆放如下图所示：
2. 交互制作
2.1 中继器表格传值
在中继器每项加载时，如果zimu列的值不为空，就是对应字母所在的行，我们用设置文本的交互，将zimu里值设置到字母对应的矩形中，然后用设置面板状态的交互，将动态面板设置为字母状态；如果zimu列的值为空，就是选项所在的行，我们用设置文本的交互，将text列的值设置到选项对应的文本中。
2.2 字母定位和记录
然后我们要再增加A-Z的记录锚点（默认隐藏，只用作逻辑处理），用于记录对应字母所在的位置，这个位置我们可以用公式自动计算，字母所在的y坐标值=(字母所在的行序号-1)*每行高度，然后我们将记录字母移动到的对应的位置
在鼠标单击锚点时，我们用滚动到元件的交互，滚动到对应字母的记录锚点，然后在用选中的交互，让该字母选中加粗。
2.3 鼠标滚动查看时反选字母
鼠标滚轮上下滚动时，我们用scrolly函数获取滚动条y坐标值滚动的距离，然后分别和A-Z的记录锚点记录的坐标值对应，例如如果滚动距离大于记录A，就选中A; 如果滚动距离大于记录B,就选中B......如此类推
这样我们就完成了字母分类定位选择器的原型模板，后续使用也很方便，只需要在中继器表格里，在对应字母下填写选项信息即可。
以上就是本期教程的全部内容，感谢您的阅读，我们下期见。