4233永利皇宫_www.4233.com_永利皇宫信誉总站

热门关键词: 4233永利皇宫,www.4233.com,永利皇宫信誉总站

4233永利皇宫底部对齐Ctrl+Alt+B,元件说明

日期:2019-10-01编辑作者:新闻动态

原标题:Axure教程:省市县三级联动选择(全国省市区数据)

一、辅助线

看过连载前文的都知道,在Axure中完成一个基本的交互设置其实很简答,我们只要按照提示与引导一步步的选择事件和动作,做好元件和情形的命名即可。当你熟悉了,情形的命名也可以省略了。

4233永利皇宫 1元件说明

省市县三级联动选择功能在互联网平台应用非常广泛,很多人在做产品设计时,不知道怎么实现三级联动效果,或者只能简单实现一两个固定城市的三级联动效果。如果要实现全国城市的三级联动选择呢?作者将通过这篇案列分享,教大家使用Axure制作实现“全国城市省市县三级联动选择效果”。

  • 全局辅助线
    作用于站点中所有页面,包括新建页面。
  • 页面辅助线
    只作用于当前页面
  • 自适应视图辅助线
    只显示在用户设置的自适应视图中
  • 打印辅助线
    用于观察页面效果,正确打印页面
    注:1mm=2.8px

我们知道有些事件的发生是有前提条件的,不同的条件会导致事件发生不同的动作,这就是事务的内在逻辑。“逻辑”一词最早由古希腊学者亚里士多德提出。狭义上逻辑既指思维的规律,也指研究思维规律的学科即逻辑学。广义上逻辑泛指规律,包括思维规律和客观规律。逻辑包括形式逻辑与辩证逻辑,形式逻辑包括归纳逻辑与演绎逻辑,辩证逻辑包括矛盾逻辑与对称逻辑。对称逻辑是人的整体思维(包括抽象思维与具象思维)的逻辑。

摘要:元件作为Axure 9.0的基础功能,线框图的绘制与交互事件的设置都离不开它,熟练掌握并了解每个元件的功能及用途,对原型设计来说尤为重要。这是一篇细到令人发指的关于元件的使用说明,不仅有基础的使用知识讲解,也有一些使用技巧的说明。Axure 9.0与8.0相比并没有增加新的元件,但9.0的元件却更好用,用起来更顺手,更有设计感,它的好用与顺手体现在每一个细节之中。

4233永利皇宫 2

二、对齐

4233永利皇宫 3在思考逻辑?.jpg

元件是线框图绘制过程中必不可少的基础元素,线框图是由一些列元件组合而成。因此认识和熟练了解每一个元件的特征,对绘制线框图或者原型来说是非常重要的,本章节就详细讲解每个元件的用途和应用特征。

实现效果

左对齐 Ctrl+Alt+L
右对齐Ctrl+Alt+R
居中对齐Ctrl+Alt+C
顶部对齐Ctrl+Alt+T
底部对齐Ctrl+Alt+B
上下居中Ctrl+Alt+M
进行对齐操作时会以先选中的元件为基准来对齐

当我们为事件添加第1个情形时,如果符合情形1的条件,则执行设定的交互动作;添加第2个情形时,则变成了否则这样的句式,则执行设定的交互动作,变成了与第1个情形对立的情况,即除第1个情形之外的条件下,执行情形2的动作。很多时候我们并不希望这样,比如我们希望在选择省份下拉列表时,选项中选择不同的省,下方显示该省的城市列表。这个时候就需要为省份下拉列表添加”选项改变时“事件,将各省的城市列表转换为动态面板不同的状态。在为省份下拉列表这一元件选择不同的选项时,设置动态面板显示不同的状态,将下拉列表的各项作为情形的逻辑条件。这个时候,其实我们希望每个情形的执行是并列关系,互不干扰。因此,在这里我们手动将其他情形切换为如果的逻辑句式。右击情形,选择“切换为[如果]或[否则]"。

1.2.1 公用元件

方框、椭圆、占位符、按钮、标题、标签和文本,这几个元件本质上都属于形状元件。选中元件,可以通过右侧对应的样式面板对元件进行编辑。

添加文本:选中元件,双击元件或右击在弹出菜单中选择“编辑文字”,即可对元件执行添加文本、编辑文本的操作。

选择形状:形状元件可以改变各种形状,包括矩形、三角形、圆形、弧形、五角星、爱心、水滴等。选中元件,右键单击在弹出菜单中选择“选择形状”。

4233永利皇宫 4选择形状

转换为图片:形状元件转换为图片后,可以保留形状元件上添加的交互和注释。选中元件,右键单击在弹出菜单中选择“转换为图片”。

4233永利皇宫 5转换为图片

填充:形状元件支持颜色填充和图片填充。颜色填充可通过顶部的工具栏或右侧的样式面板,进行配色。通过形状元件导入的图片,大小和位置固定在形状内部,不同于常规的图片导入。选中形状元件,右键单击下拉菜单中选择“导入图像”或在右侧样式面板选择本地图片,完成导入。

4233永利皇宫 6颜色填充4233永利皇宫 7图片填充

边框:形状元件可以设置边框的颜色、边框线的粗细、线条的样式以及每条边框线的可见性。通过顶部工具栏或右侧样式面板均可以设置。

4233永利皇宫 8设置边框线

编辑控点:通过拖动控点的位置,可以将元件改变成任何你想要的形状,一般元件有4个控点。选中形状元件,右键单击下拉菜单中选择“编辑控点”或点击顶部工具栏中的点,拖拽元件边框上的小菱形位置,可以改变元件现状。

4233永利皇宫 9编辑控点

变换形状:可以对形状元件进行水平和垂直翻转,对多个形状元件进行布尔运算,改变点的连接方式(直线连接或曲线连接)。选中形状元件、右键单击下拉菜单中选择“变换形状”,弹出的右侧菜单中选择变换方式。

4233永利皇宫 10变换形状

指定选择组:与单选按钮组效果类似,当组中有一个元件被选中后,其他组元件自动切换为未选中状态,常用语于Table切换或标签导航。若将元件添加到指定的组,首先选中形状元件,右键单击下拉菜单中选择“指定选择组”,编辑选择组名称。

4233永利皇宫 11指定选择组

工具提示:常用于一些操作提示,如Axure工具栏、页面与大纲、库与母版等相关的操作按钮,鼠标悬停在按钮上方,显示提示信息。选中形状元件,右键单击下拉菜单中选择“工具提示”,编辑提示信息。

4233永利皇宫 12工具提示

圆角效果:形状元件可以将直角转换为圆角。选中元件,拖动左上角的倒三角手柄来控制圆角的半径,也可以通过右侧样式面板输入角度来调整圆角效果。在样式面板中,还可以设置各圆角的可见性,可以做到部分顶点显示为圆角,部分顶点显示为直角。

4233永利皇宫 13圆角设置

阴影:可以为形状添加外部阴影、内部阴影和文字阴影,增加原型的保真程度。选中元件,通过顶部的工具栏或右侧的样式面板为形状元件添加各种阴影,可以自由设置阴影的投影位置、大小、颜色以及模糊程度。

4233永利皇宫 14阴影的设置

不透明度:通过拖动右侧样式面板中的滑块,可以灵活设置形状元件的不透明度。

4233永利皇宫 15设置不透明度

边距:控制形状元件内的文字与上下左右四个边框线的距离。选中形状元件后,通过右侧的样式面板调整文字与四个方向边框线的距离。

4233永利皇宫 16调整边距

自适应宽高:根据形状元件内的文字内容,可以自适应宽度和高度,减少了手动调整元件尺寸和文字换行的操作。选中元件,点击右侧样式面板的适合文本宽度或适合文本高度。选择适合文本宽度,则所有文本在一行显示,形状元件的宽度跟着文字的宽度而自动调整;选择适合文本高度,则形状元件的高度随着文字的高度而自动调整。

4233永利皇宫 17自适应文本的宽

交互样式:形状元件支持添加鼠标悬停时、鼠标按下时、选定时、禁用时、获得焦点时的交互样式。选中形状元件,点击右侧交互面板,点击新建交互,为元件设置样式效果。

4233永利皇宫 18设置样式效果

图片元件可以用来添加图片和插图,以表达你的设计理念、产品创新、照片等更多内容。

导入图像:拖拽一个图片元件到设计区域,双击或右键单击菜单中选择“导入图像”,导入图片。Axure支持的图片格式包含:JPG、GIF、PNG和BMP。

粘贴图片:从任意处复制一张图片均可以粘贴到Axure中,当我们复制的图片较大时,系统会提示“该图像过大,可能导致应用程序运行缓慢,您要优化它吗?”,建议点击是,系统将会无损压缩图片大小。一般从excel或CSV复制内容时,建议点击右键,选择“选择性粘贴,粘贴为图片”,直接Ctrl+V通常会粘贴为文本格式。

4233永利皇宫 19优化提示4233永利皇宫 20excel粘贴

添加/编辑图片文字:导入图片后,右击图片选择“编辑文字”,图片上的文字还可以进行样式编辑,如颜色、大小、字体等。

4233永利皇宫 21编辑图片文字

水平和垂直翻转:导入图片后,选中图片,右键弹出菜单中选择“水平翻转”或“垂直翻转”,可以对图片进行水平和垂直翻转。

分割图像:分割与裁剪在设计领域俗称切图。两者的区别在于是否保持了图片的完整性,前者完整保留图片内容,后者默认保留选定部分内容。选中图片,右键单击菜单或在右侧样式面板中选择分割图像,出现十字架虚线,十字架交叉处即为切点,点击设计区域右上角的+、—和|选择切割线,—代表了横线切割,+代表了竖线切割。

4233永利皇宫 22分割图像

裁剪图像:分为裁剪、复制和剪切三种方式。裁剪图片只保留选定区域,复制不对原图像有任何影响,剪切从原图片中切除选定区域。选中图片,右键单击菜单或在右侧样式面板中选择剪裁图像,通过拖拽虚线矩形框四个顶点的位置来调整裁剪范围大小,移动矩形框确定裁剪的区域。点击设计区域右上角的裁剪、复制和剪切可以选择剪裁的方式,默认为剪裁。

4233永利皇宫 23裁剪图像

图片边框和圆角:通过工具栏和样式面板可以给图片添加边框。设置边框的颜色、边框线的厚度、边框线的样式。拖动图片左上角的倒三角或直接在样式面板设置圆角半径,来达到设置圆角的目的。(设置界面与形状元件类似,不在重复截图)

不透明度和阴影:通过拖动样式面板中的滑块可以设置图片的不透明度。图片元件仅能设置外部阴影,设计方法与形状元件类似。(设置界面与形状元件类似,不在重复截图)

优化图片:使用通过图片功能,在保证基本不影响图片浏览质量的前提下(降低图片的像素密度,但一般肉眼无法察觉,基本可以忽略),使得图片占用的存储空间更小,同时也可以提升原型的加载速度,提升浏览体验。通常在导入大图时,Axure会自动提示是否需要优化,也可以手动优化。选中图片,右键点击菜单选择“优化图像”。

4233永利皇宫 24优化图像

等比例缩放:按住shift键盘,同时拖动图片边角的顶点,可以按比例缩放图片。选中图片,通过工具栏或样式面板中锁定宽高比例,更改宽或高的值也可以做到等比例缩放。

4233永利皇宫 25等比例缩放图片

图片交互样式:图片也可以像形状元件一样添加交互样式,可以添加鼠标悬停时、鼠标按下时、选定时、禁用时、获得焦点时样式效果。(设置界面与形状元件类似,不在重复截图)

在原型设计时,通常需要将原型的几个版块或内容进行区隔,这个时候利用水平线和垂直线就会比较方便。

箭头:通过工具栏或样式面板可以为横线或垂直线设置箭头样式。选中线条,在工具栏或样式面板中点击箭头样式,在下拉列表中任意选中想要的箭头样式。

4233永利皇宫 26选择箭头样式

颜色、厚度和样式:可以为线条添加颜色、设置厚度和样式,在工具栏和样式面板中均可以设置。按住shift键,拖动线条,可以改变线条的长短。

4233永利皇宫 27设置颜色、厚度和样式

旋转线条:Windows按住Ctrl,Mac按住cmd,同时将鼠标悬停在线的末尾进行拖拽,或者在样式面板中直接输入旋转角度。注意这里的旋转角度均按照顺时针方向旋转。

4233永利皇宫 28旋转角度

热区是一个浮在最顶层的透明图层,热区可以放置在任意元件的上方,为热区设置交互其实也等同于为热区下方的元件设置交互。

多个元件设置同一交互:如资讯列表页,需要同时为图片和文章标题设置一个鼠标单击跳转事件,这个时候可以直接在图片和标题上覆盖一层热区,为热区设置鼠标单击事件。

单个元件中的某一区域设置交互:利用热区覆盖在元件上的局部区域,为热区设置鼠标单击事件,即可起到元件的局部区域可点击效果。

热区的可见性:预览原型效果时,热区是透明不可见的,但在Axure源文件中默认会显示为一个透明的遮罩层,通过菜单栏中的视图>遮罩>热点,可以隐藏掉遮罩,与预览时的效果是一样的。

4233永利皇宫 29热区设置交互&隐藏遮罩

动态面板可以创建多个状态,每个状态下面都可以装有若干个元件,每个状态可以当做是一个全新的页面,在这里可以任意摆放元件,设置元件的样式甚至是交互,因此它更像是一个巨大的容器。动态面板是在原型制作中使用最多的高级元件,很多交互效果都依赖于动态面板来实现。

动态面板状态:动态面板是由一个或多个状态组成的,每一个状态里面都可以包含多个元件。同一时间,动态面板只能显示一个状态,使用交互设置可以显示或隐藏动态面板以及各状态的可见性。添加动态面板有两种方法,第一种,直接从元件库拖拽动态面板至设计区域;第二种,将要设置为动态面板的元件右键单击选择“转换为动态面板”。其中第二种方法,可以直接调整动态面板的大小至合适尺寸。第一种方法,如果状态中元件的尺寸大于动态面板时,则超出部分在动态面板中将不可见。在样式面板中可设置“调整大小以适合内容”,以保证状态中元件的可见性。

编辑动态面板状态:双击动态面板选择一个状态进行编辑,进入状态中,我们会看到中间有一个白色矩形区域,矩形区域为动态面板的画布,超出部分,则在动态面板中不可见,如果看不到白色矩形,则一定是在样式面板中为动态面板勾选了“调整大小以适应内容”,取消勾选,则可以在状态中看到白色矩形。在状态中编辑元件,就和我们平常在页面中编辑元件一样操作。设计区域的右上角可以切换隔离状态,默认为隔离。隔离状态是指是否将动态面板以外的元件纳入进来。点击设计区域右上角的关闭按钮,则为退出动态面板状态,回到页面。

4233永利皇宫 30自适应内容4233永利皇宫 31编辑状态

管理动态面板状态:双击动态面板进入编辑状态,点击设计区域左上角可以管理动态面板的状态,在这里可以增加状态、复制状态、删除状态。

4233永利皇宫 32管理动态面板状态

动态面板专有样式

滚动条:当动态面板尺寸小于状态内容尺寸时,需要为动态面板设置滚动条以查看状态中的更多内容。滚动条有四种样式:不需要、根据需要滚动、纵向滚动、横向滚动。选中动态面板,在右侧样式面板中设置滚动条样式。

100%宽度:勾选后动态面板各状态在浏览器中打开后,可用显示完整的宽度,而不受动态面板自身宽度影响。

固定到浏览器:始终固定在页面的某个特定位置,如App的底部导航,资讯类产品的顶部标签导航都可以利用“固定到浏览器”的样式效果。选中动态面板,点击右侧样式面板的“固定到浏览器”,勾选固定到浏览器窗口,选择固定位置的方向,设置边距,勾选保持在前面(将动态面板图层置顶)。

4233永利皇宫 33动态面板滚动条样式4233永利皇宫 34100%宽度4233永利皇宫 35浏览器中固定位置

其他通用样式

动态面板的位置和尺寸、填充、边框、阴影和圆角等这些公共样式的属性设置同形状元件一致,请参考上文说明

设置动态面板状态

面板切换:对于有多个状态的动态面板,可以使用设置动态面板状态这一动作切换到指定的状态,这也是动态面板最常用的交互动作。在用例的交互动作中选择“设置动态面板状态”,在状态项中下拉选择切换的状态。下拉选择的切换状态包含以下四种切换方式:指定状态(state1/state2...)、上一个状态、下一个状态、停止切换、值。

上一个/下一个:选择上一个状态、下一个状态时可以进行状态的重复循环,设置中自动勾选“从最后一个到第一个自动循环”,在更多选项中还可以设置首次循环的时间间隔。这样动态面板就可以按照规律无限循环下去,循环切换常用于轮播图的自动播放。

停止切换:当我们需要停止动态面板无限循环时,如停止图片轮播或内容广播,可以在状态列表中选择停止切换。

值:使用值来设置动态面板状态时,需要注意值必须与动态面板的状态名称一致时,才能生效。当需要基于某一个页面存储的全局变量值在本页面中使用“页面加载时”事件来设置动态面板到指定状态。此时,只需要设置一个简单的交互用例即可实现。

动态面板切换动画:进入与退出都可以设置过渡动画,在设置用例时的动作配置中选择动画效果。进入与退出支持设定的动画效果包含:逐渐、向上滑动、向下滑动、向左滑动、向右滑动、向上翻转、向下翻转、向左翻转、向右翻转。设定动画效果后,我们需要为每个过渡动画设置时间,注意这里的时间单位是毫秒。

更多选项:如果原来动态面板为隐藏,在这里可以勾选为显示,还可以设置展开和收起的状态。

4233永利皇宫 36动态面板改变状态

当我们需要引用页面或页面中某个部分的内容时,可以使用内部框架达到引用的效果。内部框架既可以引用Axure文件中的页面,也可以引用外部的页面。

从元件库中拖动内部框架至设计区域,双击内部框架,在弹出的窗口中选择链接的内部页面,或填写外部页面的URL地址,点击确定,完成引用页面的设置。右侧的样式面板可以设置隐藏边框,下拉选择滚动条的显示方式和预览类型。滚动条的显示方式包含:根据需要滚动、总是滚动和从不滚动,这里的滚动条设置包含了垂直滚动和水平滚动。预览类型包含:无、视频、地图和自定义预览,自定义预览支持从本地导入图片。这里的预览设置仅为Axure内部预览,在浏览器预览看不到设置效果。

4233永利皇宫 37设置引用页面4233永利皇宫 38滚动条&预览

中继器元件由中继器数据集和中继器项两部分构成。中继器可以用于需要重复设置的元件,如商品列表页、资讯列表页、联系人列表、表格等。

编辑中继器:从元件库拖动中继器至设计区域,双击中继器进入中继器编辑页面,中间的白色区域为中继器的画布,中继器的画布大小既可以手动调整,也可以根据页面内容自动调,在设计时无需手动拖动顶点来控制画布大小。画布外的元件,将会同步至中继器的左侧或上方。中继器画布右上角有一个隔离开关和关闭按钮,隔离开关的作用同动态面板一致,默认为关闭,点击开启后,会将中继器周围的其他元件均纳入进来,像是一个容量超大的乾坤袋。中继器编辑页面可以任意放置元件,如同在一个全新页面进行线框图设计。

4233永利皇宫 39编辑中继器

中继器数据集:中继器元件是由中继器数据集的数据项填充,填充的数据项可以是文本、图片甚至是链接。Axure 9.0中,在中继器内部和外部均可以编辑数据集。右侧的样式面板中,我们可以看到类似于表格形状的即为数据集,在单元格里可以任意填充数据。数据集中的行与列的数据可以任意编辑,值得注意的是数据集列的命名需要为英文,否则在中继器项载入数据时将无法关联数据集内容。

4233永利皇宫 40编辑数据集

中继器的项:中继器中重复布局的元件这里称之为项,双击中继器元件,进入中继器进行编辑,中继器页面中的元件会被重复加载多次(中继器有几行信息,就被重复加载几次)。

4233永利皇宫 41中继器的项

加载项:利用交互事件每项加载时将数据集中的数据填充到设计区域。

插入文本:双击交互事件每项加载时,添加设置文本动作,设置value值时,点击右侧的fx,点击插入变量、属性、函数或运算符,在下拉列表中找到中继器/数据集下面的变量Item.Phone,点击确定完成文本的加载。完成此设置后,当中继器每项加载时,就会将数据集中列的内容自动插入到刚刚设置的文本元件中。

4233永利皇宫 42中继器文本加载

导入图片:导入图像到数据集中并使用“设置图像”动作将图片插入到中继器的项中。在做这项交互设置前,需要提前在中继器中准备一个图像元件,用来关联显示中继器数据集的图像。在数据集中右击想要插入图片的项,选择“导入图像”,选择插入本地图像。右侧交互面板中点击“每项加载时”事件。添加“设置图像”动作,选择目标元件(中继器数据集事先设置图片元件的那一列内容)。设置图像时(SET DEFAULT IMAGE),选择值,点击右侧的fx,点击插入变量、属性、函数或运算符,在下拉列表中找到中继器/数据集下面的变量Item.Head portrait,点击确定完成图像的加载。完成此设置后,当中继器每项加载时,就会将数据集中列(Head portrait)的内容自动插入到刚刚设置的图像元件中。

4233永利皇宫 43中继器图像加载

插入页面链接:中继器数据集中的项可以添加引用页,当用户点击某个指定的元件时,触发链接跳转。数据集中右键点击空白项并选择“引用页”,选择本地页面。在中继器中选择一个触发跳转动作的元件,为其添加单击事件,添加“在当前页打开”动作,然后选择链接到外部网址或本地页面,点击fx,在弹出的编辑窗口中,点击插入变量、属性、函数或运算符,在下拉列表中找到中继器/数据集下面的变量Item.link,点击确定完成链接跳转的设置。

4233永利皇宫 44添加链接

中继器内部元件的交互:中继器的数据项可以添加任意交互,如同正常元件一样。

中继器专有样式

布局:中继器的内容支持按垂直、横向样式展示内容。垂直布局时,可以设定每一列数据有几项;横向布局时,可以设定每一行有几项。选中中继器,布局样式中选择垂直或横向,勾选换行,填写每一列或每一行项的数量。如果不勾选换行,则所有的项将全部垂直展示成一列或横向展示成一排。

4233永利皇宫 45中继器布局

项的背景:项的背景既可以设置单一颜色,也可以设置两种不同的颜色交替显示。勾选样式面板中的交替颜色,设置背景色和交替色。默认情况下,中继器内容没有背景色,页面看上去是白色,是因为整个页面背景默认显示白色,并非中继器项背景为白色。

分页:中继器为我们提供了分页功能,当中继器项较多时,可以设置分页。选中中继器,在样式面板中,勾选多页,设置每页项的数量和开始页。

4233永利皇宫 46背景与分页

本篇结语:下一节将重点讲解文本输入框、下拉列表框、列表选择框、复选框和单选按钮的使用说明及使用技巧。后续每一篇章节尽量控制篇幅,这一篇基础元件的说明有点长,基础性的东西才是最重要的,所以值得详细讲解,也希望大家能够有更深刻的理解。

如果你对Axure或原型设计有兴趣,希望系统性地学习Axure知识,掌握更多Axure使用技巧;或者希望通过临摹交互案例,进一步提升高保交互设计能力。请点击下方关注按钮,查看更多连载作品

点击获取案例作品源文件

4233永利皇宫 47

三、存储

4233永利皇宫 48如果或否则.png

  1. 可以任意选择全国所有省份、选择该省份对应的城市、选择该城市对应的县区;
  2. 未选择省份时,点击“城市下拉选择”,提示“请先选择省份”;
  3. 未选择城市时,点击“县区下拉选择”,提示“请先选择城市”;
  4. 切换选中省份时,重置城市及县区选项;
  5. 切换选中城市时,重置县区选项
  6. 当前选项处于下拉框选项状态时,点击其他选择框,隐藏当前选项下拉框;
  7. 下拉选项框展示时,下拉箭头向上,下拉选项框隐藏时,下拉箭头向上;
  8. 动态显示三级行政区移入状态、选中状态、取消选中状态。
  • RP格式
    单一用户模式
  • RPPRJ
    团队协作的项目文件
    签入控制
    可以取消签出
    版本控制和恢复到历史版本
  • RPLIB
    自定义元件库模式

全部:当全部条件都满足时,才能执行设置的动作,每个条件之间是“与”的关系,需要同时成立。我们以登录为例,点击登录按钮时,我们需要判断账号、密码,只有当账户和密码都正确,才提示“登录成功”。账号和密码的条件表达式,他们之间的逻辑关系就是全部。任何:当其中一个条件满足时,就可以执行设置的动作,每个条件之间是“或”的关系,即只要求其中一项成立。还是以登录为例,点击登录按钮时,判断账号和密码,如果其中一个不正确,则提示“账号与密码不匹配,登录失败”。

原理分析

四、组合对象与锁定对象

假设正确的账号为13333333333,密码为mima333

(1)利用中继器的数据存储功能,用三个中继器分别存放省份、城市、区域数据;

Ctrl+G 可以选中多个元器件,然后把它们组合在一起,可以一起完成移动、缩放、隐藏、排列、锁定和添加样式。

4233永利皇宫 49全部.png4233永利皇宫 50任何.png

  • 省份中继器只需1列,用来存放全国所有省份数据;
  • 城市中继器需要2列,用来存放省份数据及城市数据(注意省份名称要和省份中继器的省份名称一致);
  • 县区中继器需要2列,用来存放城市数据及县区数据(注意城市名称要和城市中继器里城市名称一致);

Ctrl+K 锁定对象位置

一个完整的条件语句由表达式和运算符构成,表达式的内容可以是文本、变量值、变量值长度、元件文字、元件文字长度、选项、选中状态、面板状态、元件的可见性、元件范围、键盘按键、指针等一切可以通过外在形式表达的内容。运算符包含了算数运算符、关系运算符和逻辑运算符。

(2)利用“省份下拉”元件的单击事件触发省份下拉选项的展示与隐藏;

五、注意点

4233永利皇宫 51表达式.png4233永利皇宫 52运算符.png

(3)利用临时变量将选中的省份名称赋值给省份输入框,从而显示当前已选省份;

-文本框不可以设置圆角属性(可以添加矩形框与文本框,再隐藏文本框边框属性即可)

连接两个表达式的算数运算符为==和!=。前一个为赋值符号,即将符号右侧的内容赋值给左侧表达式;第二表示不相等,即运算符两侧的内容不相等。

(4)利用“省份输入框”元件的文本改变事件,触发城市文本输入框的显示及城市下拉选项框的内容;

-点击文字后输入框获取焦点:为文字添加事件即可
条件事件:直接为用例添加条件即可

条件表达式中间的关系运算符包含了大于、小于、小于等于、大于等于。代表了两侧表达式之间的大小关系,表达式的内容通常是可以量化的数值或变量。

(5)利用“城市下拉”元件的选中状态事件,判断省份是否选中,未选中城市则给出“请先选择省份!”的错误提示;

-条件判断if else
在设置事件时先设置条件判断然后再设置事件。

条件表达式中,可供选择的逻辑运算符有:包含、不包含、是、不是。主要表达运算符两侧内容的包含关系和是非关系。

(6)城市、区域涉及的各元件设置方式同“2、3、4、5”步骤。

-事件中是先选中再禁用,先启用在选中

一个事件下可以添加多个情形。比如,你有一个下拉列表框,其中的项是不同的省份,你可以为给“选项改变时”事件添加多个不同的情形,通过不同的下拉列表项,执行不同的动作。默认情况下,从第二个情形开始都是否则形式的语句,可以手动点击切换为如果形式的语句。在原型中,用例是从上至下按顺序执行的。我们也可以让每个满足条件的情形都被执行。要做到这一点其实很简单,右击情形,并选择“切换为[如果]或[否则]”,将否则切换为如果。例如,在注册表单中,对每个文本输入项的内容进行单独验证。当点击注册按钮时,可以为每个文本框添加一个如果结构的条件情形,如果不符合条件,情形就动态显示不同的错误提示。

元件准备

六、动态面板

4233永利皇宫 53注册提示.png

4233永利皇宫 54

特点1、动态面板是一个多空间的元件容器,它是实际存在的(会占据空间)只是看不见而已。默认显示第一个面板

  1. 使用矩形、文本框、按钮及文本标签等元件,完成登录界面线框图的搭建。文本框作为输入项元件、按钮为登录,两个文本标签作为登录成功和登录失败的提示信息,注意做好各元件的命名工作。

  2. 为登录按钮添加“鼠标单击时”事件,选中登录按钮,在元件事件列表中选择“鼠标单击时”事件,元件动作列表选择”显示/隐藏“,目标元件选择“登录成功提示”,插入第二个动作“等待”,设置等待1000毫秒,插入第三个动作“显示/隐藏”,目标元件选择“登录成功提示”。

    4233永利皇宫 55登录成功-动作配置.png

  3. 为情形添加条件,我们期望实现的效果是:当输入的账号和密码都正确时,提示“登录成功”;当账号或密码有一个错误时,则提示“账号与密码不匹配,登录失败”。

  1. 省份输入框背景(省份背景),放在输入框底部
  2. 省份输入框(省份显示),用于显示已选择的省份名称
  3. 省份下拉指示图标(省份选择),用于点击触发展示下拉选项,隐藏下拉选项
  4. 省份下拉组合选项(包括一个中继器sf,动态面板sfn,动态面板sfw),用于显示所有省份名字
  5. 城市输入框背景(城市背景),放在输入框底部
  6. 城市输入框(城市显示),用于显示已选择的城市名称
  7. 城市下拉指示图标(城市选择),用于点击触发展示下拉选项,隐藏下拉选项
  8. 城市下拉组合选项(包括一个中继器cs,动态面板csn,动态面板csw),用于显示所有城市名字
  9. 县区输入框背景(县区背景),放在输入框底部
  10. 县区输入框(县区文字),用于显示已选择的城市名称
  11. 县区下拉指示图标(县区选择),用于点击触发展示下拉选项,隐藏下拉选项
  12. 县区下拉组合选项(包括一个中继器xq,动态面板xqn,动态面板xqw),用于显示所有县区名字
  13. 操作提示组合元件(提示框),用于显示校验出错时的提示
  14. 背景,整个案例的演示背景,可要可不要

特点2、动态面板可以设置推动元件,进而不会与已显示元件重叠显示。
用于显示提示框

假设正确的账号为13333333333,密码为mima333

隐藏提示文件,重新布局元件后效果如下:

特点3、动态面板独有的事件有拖动、载入、状态改变、滚动

  1. 为第一个情形添加条件,点击添加条件,弹出条件创建弹框,运算符左侧分别下拉选择“元件文字”和“账号输入”,运算符右侧选择文本,填写13333333333,运算符选择==;点击表达式右侧的添加行,添加第二个条件,运算符左侧分别下拉选择“元件文字”和“密码输入”,运算符右侧选择文本,填写mima333,运算符选择==,表达式上方的符合选择“全部”,点击确定,完成条件设置。

    4233永利皇宫 56登录成功-条件表达式.png

  2. 为事件添加第二个情形,点击添加情形,点击添加条件,弹出条件创建弹框,运算符左侧分别下拉选择“元件文字”和“账号输入”,运算符右侧选择文本,填写13333333333,运算符选择!=;点击表达式右侧的添加行,添加第二个条件,运算符左侧分别下拉选择“元件文字”和“密码输入”,运算符右侧选择文本,填写mima333,运算符选择!=,表达式上方的符合选择“任何”,点击确定,完成条件设置。点击插入动作,动作列表中选择“显示/隐藏”,目标元件选择“登录失败提示”,选择显示;插入动作“等待”,等待时间设置1000毫秒,插入动作“显示/隐藏”,目标元件选择“登录失败提示”,选择隐藏。

    4233永利皇宫 57登录失败-条件表达式.png4233永利皇宫 58登录失败-动作配置.png

4233永利皇宫 59

特点4、可以通过设置“显示”和“设置动态面板状态”来显示我们想要显示的动态面板中页面。两者任选其一即可。

实现步骤 1. 准备省份数据及操作显示元件

内联框架

  1. 拖动下拉列表框至设计区域,添加列表项,项的内容为省份名称,命名为省份;拖动一个列表框至设计区域,添加列表项,项的内容为省城市名称;将列表框右键转换为动态面板,复制多个状态(注意每个状态的命名,建议以省命名),每个状态的列表框显示不同省份的城市,动态面板命名为城市。

  2. 我们期望实现的效果是,当下拉列表框选择不同的省份时,下方的列表框显示对应省份的城市列表。

  3. 选中省下拉列表,在元件事件列表中选择“选项改变时”事件,选择“设置面板状态”动作,目标元件选择动态面板,选择对应的面板状态,点击完成,完成动作设置。

    4233永利皇宫 604233永利皇宫,广东-设置动作.png

  4. 为刚才的情形1设置条件,点击添加条件,在条件创建弹框中,运算符左侧分别选择被选项和当前,运算符右侧分别选择选项和广东,点击确定,完成条件设置。

    4233永利皇宫 61广东-设置条件.png

本文由4233永利皇宫发布于新闻动态,转载请注明出处:4233永利皇宫底部对齐Ctrl+Alt+B,元件说明

关键词:

用户是移动应用分析的主体,用户对同一页面的

原标题:每日增长:设计一款好的的APP或微信小程序需要注意什么 1 本文主要讲述两个主题: 数据统计平台调研报告...

详细>>

公司阻止员工建立工会 发现就被解雇,公司开除

原标题:特斯拉员工:公司阻止员工建立工会 发现就被解雇 原标题:特斯拉工人:公司开除了所有鼓吹工会的人 据...

详细>>

华为与电信合作的品牌麦芒也因即将发布新机麦

原标题:麦芒7生而无畏 手机企业创新战到底在拼什么 今天下午,华为在成都量子光举办新品发布会,正式发布新一...

详细>>

而微信小程序为何如此受餐饮行业欢迎呢,推送

原标题:小泥人为你解析为什么小程序能吃定餐饮行业? 随着微信小程序不断发展,各行各业对小程序的应用也越来...

详细>>