现在,外卖也好,购物也好,打车也好,点评打分是网站常见的用户互动的功能,一般都是1~5分之间评分,分值对应几颗星或者几颗心,当用户点击确定之后打分就完成了。下面我就以大众点评网为例,制作了打分效果。
做之前,我们先来分析一下,点评共涉及到6个状态:没有打分的时候、一颗星的时候、二颗星的时候、三颗星的时候、四颗星的时候、五颗星的时候。
根据之前的学习,知道点评区域是一个动态面板,这个动态面板有六个状态,当鼠标分别悬停时,切换出不同的状态。
我们先准备好6个星星的图片。
一、index页面,拖一个动态面板到页面区域。
二、为动态面板添加6个状态,分别命名:zero、one、two、three、four、five
三、编辑动态面板的状态,我们先编辑zero状态,双击zero状态,进入编辑状态
1、先拖一个矩形部件作为打分区域的背景,属性如下
2、再拖一个图片部件,命名zeroimg,双击选择准备好的未打分的图片
3、接下来拖入一个热点部件,第一个部件盖住左侧第一个星星,将第一个部件命名为star1
4、需要为star1添加“鼠标移入时” “鼠标点击时” “鼠标移出时”
鼠标移入时,动态面板变为一颗星星亮了,状态选择one
鼠标点击时,需要记住打了几分,一颗星对应1分,两颗星对应两分,这里就需要新建一个变量分数,命名为score
这里需要注意的是,要先新建变量(点击fx就行),不然添加用例的时候是没有score这个选择的。
鼠标移出时,需要用到用例编辑里的条件功能,这里是当分数是0的时候,设置动态面板状态为zero状态,当分数是1的时候状态为one,以此类推。
5、拖入一个矩形,无填充无边框,输入文字“点击星星为商户打分”
四、将star1复制4份,分别命名为star2、star3、star4、star5,大小不变,Y坐标不变,X坐标依次是23、40、57、74
将每个star涉及到“鼠标移入时” “鼠标点击时”事件修改对应的状态与分数,“鼠标移出时”不用修改
五、将zero状态中所有的元素都复制到one、two、three、four、five状态中,图片也对应修改为一颗星、两颗星、三颗星、四颗星、五颗星,文字“点击星星为商户打分”也对应修改为:很差、差、较好、好、很好
六、给index页面添加“页面载入时”事件,页面初始化的时候,将score设置为0,这样打开页面的时候就是等待打分的状态了
到这里,就可以预览一下看看,跟真的一样。