墨刀使用--页面导航条功能实现交互

我们还是以电商为例，通常首页分类部分、订单列表部分会显示导航条功能，导航条可以左右滑动，并且点击哪个显示对应的页面数据；

我们以订单列表的导航条功能为例，实现交互；

首先我们先画出订单列表页面，顶部搜索框和导航栏，下面显示的订单部分，拖动一个滚动面板，设置为垂直滚动

我这边的导航条是也用滚动面板左右滑动实现的，设置的水平滚动

当然导航栏我们也可以直接搜索导航栏，直接拉取，这样的导航栏水平滑动不显示滑动标识，可以直接左右滑动

但是要怎么实现导航条上的各个状态和显示对应状态的数据呢

首先我们可以把各个状态的页面数据先画出来，看到上面的搜索和导航条都是共有部分，可以设置为母版直接拉取使用。

订单列表的订单状态有全部、待付款、待发货、待收货、退款/售后 待评价，我们要实现的就是点击全部，显示全部订单列表，点击待付款，显示待付款的订单列表；

我们可以直接在母版部分直接编辑设置各状态的交互事件

因为我现在就在订单列表-全部状态页面，所以添加的交互时间，点击全部让再显示页面时无法选择当前页面，所有无需做交互，只做其余页面的交互即可。

这样各个状态的交互动作就完成了，我们可以点击播放按钮进行预览查看页面效果。

欢迎朋友们提出宝贵的意见，有不懂的可以积极提问，很乐意帮大家解答，一起进步成长啦！