Axure入门案例系列-手机端滚动选择器_第1页
Axure入门案例系列-手机端滚动选择器_第2页
Axure入门案例系列-手机端滚动选择器_第3页
Axure入门案例系列-手机端滚动选择器_第4页
Axure入门案例系列-手机端滚动选择器_第5页
已阅读5页，还剩12页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

Axure入门案例系列——手机端滚动选择器效果展示：准备：Axure8（或Axure9）软件已安装，掌握基本的软件使用，掌握基础的动态面板知识。本教程知识点：进阶的动态面板使用。基础函数应用。基础中继器应用。本文以基础的单一选择为例（多选择可以将滑动区域、数据集模块进行复制，调整滑动区域、数据集宽度即可）。一、功能鼠标拖动滑轮进行数据选择，滑动结束后，选中数据居中。二、制作方式1.制作基础的静态模块（注意元件命名，本案例涉及局部变量关联元件，元件命名有利于查找对应元件）。2.制作上遮盖、选中、下遮盖上遮盖、下遮盖制作了一个模糊的效果，实际制作为对应的矩形，填充渐变色（#FFFFFF（50%）–#FFFFFF（100%）），注意设置对应的角度，下遮盖为-90°，上遮盖为90°。（图以上遮盖为例，选中渐变左侧。）选中效果：设置选中为对应的纯色矩形即可。（设置颜色主要是与背景有所区分，颜色可选APP主色或其它与背景有对比度的颜色）。3.制作数据集数据（中继器基础）（1）绘图区域拖入中继器组件（2）完成上下模糊区域修改中继器组件内部为文本标签元件，调整字体元件的宽（375px）、高（35px），文本标签元件字体设置对齐为左右居中，上下居中。默认中继器中是一个矩形可以手动删除后拖入文本标签元件。技巧：矩形快速变为文本标签元件：移除矩形背景色、移除矩形描边即可。（3）配置中继器数据关联设置每项加载时，文字为中继器对应list列表数据。list：中继器表头，自行修改（注：中继器表头目前不支持中文）。list数据：自行填写（此处数据为滚动选择器中的数据，可自行进行填写，目前需大于等于7。）（4）交互整体原理（5）配置滑动交互实现原理：整个滑动交互分为两层。第一层：用户鼠标拖动滑动区域动态面板移动后，数据集动态面板跟随移动。第二层：当滑动区域移动结束后，计算出滑动的数据距离，给数据集动态面板进行计算并进行上下对应调整（保证文案居中）。滑动区域高度计算：滑动区域比数据集区域高6个数据高度（取决于显示滑动区域多少）。所有可以在载入是计算滑块区域的高度：滑块区域高度=中继器数据个数35+额外高出的高度（635）。（6）配置滑动区域交互配置滑动区域可拖动的范围按照滑块区域顶部为依据，设置顶部可移动区域为:[-滑块高度+245（7个滑动展示区域），0]。计算依据参考整体交互原理。（7）配置数据移动区域与展示设置数据集跟随滑动区域移动计算出滑动区域移动后，数据集需要移动多少进行最后结果的调整。计算方式：滑动区域移动的距离取除35（单个数据高度）余数的整。然后进行乘35。然后将数据区域约束在对应的滚动区域中。计算依据参考整体交互原理。总结过程相对较为复杂，如果只是日常使用，下载对应源文件更改数据即

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论