点击播放优酷视频教程

一、案例效果

《测一测你的女王指数》

二、场景应用

按钮/Button 组件可以表现2种状态。比如我们做测试题的时候，点击选中了一个答案，那么点击这个动作进行时，我们会看到被点击的元素变成了另外的颜色或表示被选中。这就需要图片按钮来表现。

除了支持点击触发外，还可以设置为开关模式，类似于电源开关，有两个显示状态：激活前和激活后。

《你是撩神还是撩渣，测一测你的七夕撩妹指数！》

《测一测你的理想生活》

《内蒙古方言终极大考，不服来战！》

《【节日合成海报】你的童心指数》

三、素材准备

文末附件下载练习素材。

准备图片按钮的2个状态图片，切记要用PNG或者JPG格式的图片，并且要注意将PNG多余的透明区域裁切掉，保证图片按钮的两个激活状态，即两张图片一样大小，防止变形。

三、组件用法

基本用法

1.点击图片按钮，添加到页面。

2.选中图片按钮，可以替换素材。对于两个替换图片的要求是必须保证2张图尺寸跟比例大小一致。

3.替换完素材后，图片按钮会变形，需要勾选尺寸与位置的显示比例，即可按照图片原尺寸比例显示。

4.如果觉得图片按钮的大小不合适，还可以勾选锁定比例去调整。

5.图片按钮默认的是开关模式，即点击了图片按钮以后，就是从初始状态切换到激活状态；但如果去掉勾选，点一下图片按钮，如果不松开的情况下，图片按钮会切换到激活状态，但一旦松开点击动作，会立刻切换回初始状态，我们用动图给大家展示。

旧版视频教程

无广告视频网址  优酷视频网址