【Axure教程】字母定位选择器

今天教大家用一个中继器制作字母分类定位选择器的原型模板模版我们用中继器制作的所以使用也很方便只需要在中继器表格对应位置填写选项信息即可自动生成交互效果具体效果可以打开下方预览地址体验。【原型效果】鼠标点击字母可以快速到达对应字母开头的选项的位置可以通过鼠标滚轮上下滚动、或者上下拖动的方式上下查看更多选项。【原型预览含下载地址】https://axhub.im/ax9/e4f2832e83281a58/#g1p字母分类选择器【制作教程】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……如此类推这样我们就完成了字母分类定位选择器的原型模板后续使用也很方便只需要在中继器表格里在对应字母下填写选项信息即可。以上就是本期教程的全部内容感谢您的阅读我们下期见。