这两天在做一个小程序的页面要用到这个效果，上网找了一下发现相关资料比较少，于是自己参考了一下网上的思路自己摸索着做了一个，现把效果的教程做出来供大家参考，废话不多说，先放效果图：
准备工作：
1.拖出一个宽为320，高为480的矩形，命名为屏幕；
2.拖出3个下拉列表框，w:80px，h:22px，每个下拉框添加一个条目，写上自己想要选择类目，将下拉表框放至矩形的合适位置，如图：
下面进入正题：
1.拖出一个动态面板，w:220，h:480，命名为右侧选择栏，设置为隐藏
2.在动态面板里添加3个状态state1、state2、state3，每个状态下添加选项，如图：
3.拖出一个矩形（此时不要覆盖屏幕），w:320，h:480，命名为背景层，边框和填充颜色选择淡灰色#CCCCCC，不透明度30%，设置为隐藏：
3.拖出3个热区，hot1、hot2、hot3，大小和下拉栏一致，将其覆盖到三个下拉栏并设置用例：
hot1选择单击时，面板状态—>左侧选择栏—>state1,动作选择向左滑动，时间500ms，把“如果隐藏则显示面板”勾上：
再添加一个动作，显示/隐藏->背景层，选择显示，动作选择逐渐，时间500ms：
同理state2、state3设置相应的用例，面板状态分别选择state2、state3就好；
4.为背景层和右侧选择栏添加用例:
背景层：单击时：1）显示/隐藏->背景层->隐藏，动画选择逐渐，时间500ms
2）显示/隐藏->右侧选择栏->隐藏，动画选择向右滑动，时间500ms
右侧选择栏：单击时：1）显示/隐藏->背景层->隐藏，动画选择逐渐，时间500ms
2）显示/隐藏->右侧选择栏->隐藏，动画选择向右滑动，时间500ms
5.最后把右侧选择栏拖至边缘与屏幕的右边缘重合，背景层与屏幕重合，如图：
*注意：背景层应置于右侧选择栏之下，正确的顺序是：右侧选择栏->背景层->屏幕；
6.大功告成，预览吧！查看效果