.

18.按钮组/button组组件:单选题/测试题/单选效果

小常发表于:2017年09月15日 15:11:20更新于:2021年11月22日 10:34:48

00160f671a5c71208be24708618dbd2

点击播放优酷视频教程 


一、案例效果

案例效果一

00159bb50187e19ea4ae9cc19ff82be


案例效果二

00159bb7ccc50dd180dc5235ce3b7e1


二、应用场景

之前的选择题中,我们通常用【幻灯组件】来控制每个选项的选择与否,不但要设置选中某个选项时的状态,还要同时设置其他选项的显示状态,逻辑设置比较繁琐。

为了解决这个问题,开发【按钮组】组件,与【图片按钮】组件结合使用,简化设置过程,可以做单选题,或者跟单选有关的其他交互效果。

【按钮组】组件要与多个【图片按钮】组件结合使用。用来选择不同的选项时,保持单选属性,还可以给按钮赋值文字或数字,通过触发设置参数,用段落组件等显示所赋值。


三、素材准备

文末附件下载素材,非商用,仅供学习使用。

因为【按钮组】主要是结合【图片组件】来用,其实主要是准备【图片按钮】组件的素材,切记要用PNG或者JPG格式的图片,并且要注意将JPG多余的透明区域裁切掉,【图片组件】是有两个状态图片,所以每个选项至少做2张图,并且2张图的尺寸比例一定要保持一致。

保证图片按钮的两个激活状态,即两张图片一样大小,防止变形。

0015cac5079c1ea1628a11d246b427e

点击:素材下载



四、组件用法

基本用法

1.点击添加图片按钮组件,到页面中,可以添加多个。

image.png

2.找到高级组件中的按钮组组件,点击添加按钮组到页面中

image.png


3.将按钮组与多个图片按钮绑定。选中小面板中的按钮组组件,右侧添加选项按钮,点击“+”,显示设定面板,显示多个按钮,勾选多个按钮。

image.png

4.设置完成,点击左上角预览按钮查看单选效果。

image.png



高级用法

可以通过给每个选项设置值,结合段落组件显示当前选择的结果。

1.替换按钮图片,这时四个月饼就是按钮选项了。

image.png


2.如果替换后的图片按钮组件变形了,点击尺寸与位置这里的50%或100%显示即可。

0015cac55015ffd8a26149b835b4ad9


3.选中按钮组,给每个图片按钮设置值(直接输入即可),可以是文字也可以是数值。

image.png


4.添加一个文本组件,用来显示:选择不同的选项时的按钮组的值。

image.png


5.选中按钮组组件,设置选择结束时的触发器,触发文本显示选择结果。主要设置步骤:选中按钮组——设置选择结束时触发器——触发行为选择——设置参数值——让文本组件显示按钮组选择的参数。如图:

00159bb781e82e4721a8a2016888cf4

设置完成。


补充说明:

1.【按钮组】与多个【图片按钮】绑定,从而对它们进行管理,保持选择的单一。

2.通过给按钮设置值,使【按钮组】也具备了参数变量的属性,按钮组相当于成为了一个变化的值,它的变化是由选择项决定的。


附件:按钮组素材.zip • 402.83KB • 下载

回复(3)