墨刀原型--多tab切换显示对应页面场景交互步骤

一般我们画原型页面，PC端或者APP端或小程序端，都会有页面会切换多个tab或状态，同时对应页面显示对应的页面数据。

设计思路如下：

以订单列表页面为例：

可以将订单列表页面分为3部分，固定的头部、状态栏、各个状态的订单列表数据，头部和状态栏都是固定在头部，状态栏可以左右滑动，列表数据可上下滑动，这里就需要用到滚动面板组件啦

首先我们先画出固定的页面头部内容

接下来拖动一个滚动面板，放到搜索栏下方

设置该滚动面板名称，方便后续设置交互事件时选择选项，同时设置滚动面板滚动方式，水平滚动就是左右滑动，所以选择水平滚动，可左右滑动切换状态

页面显示的面板橘色框，是该面板实际的显示内容区域

双击该面板，进入滚动面板编辑页，调整面板要显示的位置和大小，显示的橘色线是实际显示的区域边界线，后面的内容需要滚动才可看到，这是该面板显示全部内容的整体区域，就是所有状态都在该框内显示，可左右滑动显示全部内容

接下来就开始设置各个tab状态或订单状态

设置好后我们要做的交互场景是点击各个状态，对应状态显示红色加粗字体，例如点击待付款，全部显示灰色字体，待付款显示红色加粗字体，我们要在下个状态画出对应的预期效果，所以复制状态1，可将状态2画出要的预期效果，可直接点击状态1的加号图标，再修改状态2内容

依次类推，多个状态就添加多个状态，同时修改对应状态内容，我这边多画了两个，后面状态交互一致

接下来就是要时间各个状态间的交互，页面默认显示状态1内容，在状态1面板点击待付款，此时切换组件状态，切换到状态2，点击已拦截，切换至状态3，点击待发货，切换到状态4，同时，状态2,3,4里的交互也要对应添加上

选择事件交互动作，单击时，效果是切换组件状态，选择要切换的组件名称，和要显示的结果，切换至哪个状态，交互都完成，就可预览查看交互是否正确。

同理接下来我们需要画订单列表各个状态的页面数据，我们要的结果是点击上方状态，对应下方下面显示对应状态的列表数据

此时也需要拉动一个滚动面板，此时设置的滚动面板是垂直滚动，也就是可上下滑动

双击面板进入编辑内容页面，可添加页面内容数据

同理，该位置的面板数据会根据上方状态切换显示对应状态的列表数据，显示位置一致，所有也是在该面板内添加多个状态，面板右上角可设置状态显示是竖排还是横排显示，根据个人习惯可设置，不影响页面数据显示

同理，添加多个状态页面，编辑各个状态的页面数据，可直接编辑状态页面名称为状态名称，方便切换事件交互时选择，状态过多时，都是状态1,2,3,4等，记不清楚可直接修改状态名称，方便操作

各个状态的列表数据也画好了后，这时我们要做的是最后的交互，点击状态，页面显示对应状态的列表数据

还回到我们的状态交互面板里，点击状态时，此时订单列表面板也切换组件状态，切换为对应状态的列表数据

依次各个状态都需要添加下交互事件，这样所有的交互事件就完成了，就可预览查看实际的交互效果啦

不太懂的话，可以查看录制的视频步骤哦

也可留言，共同讨论交流技术问题哦