局部纵向和横向滚动-股票
素材清单
涉及的技能
- 动态面板的叠加嵌套
- 交互事件：OnSwipeLeft，OnSwipeRight。
案例效果
本例模拟iOS 的 股票app，上部的股票列表可以上下拖动，下部的详细信息可以左右拖动换屏显示不同类型信息。
移动链接如下：
局部纵向和横向滚动
简明步骤
- 主界面布局。
- 添加股票名称中的热区，让详细信息随着股票名称变化。
- 股票列表的上下拖拽。
- 详细信息的动态交互。
具体步骤及说明
1. 主界面布局。
1.新建一个项目，命名为“局部纵向和横向滚动”。
2.添加动态面板dpStock作为股票列表的显示，参数如下：
| 名称 | 类型 | 坐标 | 尺寸 |
| ------------ | ------------- | ------------ |
| dpStock | Dynamic Panel | 0，0 | 414，400 |
3.添加动态面板dpDetail作为股票明细信息的显示，参数如下：
| 名称 | 类型 | 坐标 | 尺寸 |
| ------------ | ------------- | ------------ |
| dpDetail | Dynamic Panel | 0，400 | 414，296 |
4.添加动态面板dpFooter作为 底部提示信息的显示，参数如下：
| 名称 | 类型 | 坐标 | 尺寸 |
| ------------ | ------------- | ------------ |
| dpFooter | Dynamic Panel | 0，696 | 414，40 |
5.在dpStock的 state1中添加动态面板dpStockList作为股票列表的上下滚动容器，高度比dpStock的高度400略大，能够有上下滚动的空间即可，这里设置为500，参数如下：
| 名称 | 类型 | 坐标 | 尺寸 |
| ------------ | ------------- | ------------ |
| dpStockList | Dynamic Panel | 0，0 | 414，500 |
6.参考素材截图.png中的上部分股票列表，在dpStockList中制作股票列表模拟界面。这里面用一个黑色矩形作为背景，坐标和尺寸为（0，0，414，500）。文本标签文字设置为白色，字号18，显示股票代码和价格点数，红色和绿色圆角矩形作为涨跌幅。
7.在dpDetail的 state1中添加详细信息的第一屏，可以继续参考上图。这里可以直接使用截屏的图片资源detail1.png，拖到动态面板中去，坐标和尺寸为（0，40，414，256）。上面还是40高度的空白，使用 label 控件，坐标和尺寸为（0，0，414，40），字体18号居中，背景为黑色，并命名为lbCompany，显示他们的股票名。
8.在dpDetail中添加 state2和 state3，由于没有功能性的控件需求，我们也直接使用截图代替，分别在两个 state 中拖入2个图片资源detail2.png和detail3.png，坐标和尺寸都为（0，0，414，296）。
9.在dpFooter中添加黑色背景和3个圆形小按钮，模拟 PageControl控件，仍然参考screen1.png。3个圆形小按钮可以用矩形或者按钮控件制作。拖入矩形后，右键选择select shape，选择eclipse，然后分别设置这三个圆形的坐标和尺寸为（170，13，10，10），（201，13，10，10），（232，13，10，10），可以用上下左右微调位置，用align和distribute工具调整相对位置。
布局基本结束。widget manager 的截图如下：
2. 添加股票名称中的热区，让详细信息随着股票名称变化。
1.在dpStock的 state1里面，DOW J 和 AAPL 两个股票指数位置，我们拖拽2个HotSpot热区控件，让这两个股票可以接受点击的交互操作。为了简单起见，我们只做这两个股票的响应。在这两个热区控件上添加交互用例，添加OnClick事件，实现显示公司名的lbCompany根据我们点击的股票名变化。
2.选中DOW J的热区，在交互窗口添加OnClick事件，在用例编辑器中选择Set Text，在右侧窗口中找到前述显示公司名的标签lbCompany打钩，右下角的 value为DOW J，确定，如下图：
3.选中AAPL的热区，同上方法添加用例如图：
4.预览，点击这两个带热区的股票，下面详细信息中的公司名会跟随变化。
3. 股票列表的上下拖拽。
1.添加 dpStockList 的拖动交互。在dpStock的 state1里面， 选择dpStockList添加OnDrag 事件，选择Move和dpStockList，在 y 轴方向拖动，如下图：
2.添加 OnDragStop 事件来避免拖动出界。结果如下图：
当 this.y 大于0时，是向下拖动到顶的情况，这时应该将股票列表的坐标初始化到（0，0），这里还加入了500ms 的线性动画延时效果。
当 this.y 小于0时，是向上拖动到底的情况，这时我们应该将股票列表恢复到底部，y 坐标应该是400（dpStock 的高）-500（dpStockList 的高）。
4. 详细信息的动态交互。
1.详细信息支持左右滑动的交互，在 dpDetail 的3个状态间切换。
另外，还需要加一个白色圆形按钮，命名为 rectDot作为当前页的标志。我们在 home 页面添加，从dpfooter 里面复制出来即可，换成白色，坐标和尺寸为（170，400+296+13，10，10），先跟3个圆形按钮中的第一个重合，而那3个圆形按钮应设置成灰色以示区别。
2.在 home 页面中选中dpDetail，添加OnSwipeLeft和OnSwipe Right事件。
编辑 case1的条件，如果当前的状态不是第三个，则向左移动 dpDetail 到下一个状态， 选中wrap from last to first，表示第三个过后的下一个状态是回到第一个。进入和淡出的动画效果为slide In500ms和Slide out500ms。如图：
另外，还要移动rectDot，向右移动31（3个圆形按钮之间的距离）。如图：
3.编辑 case2的条件，双击OnSwipeLeft，跟 case1的设置一样。不同之处在对rectDot，当到达最后一个圆形按钮继续右移，会回到第一个。如图：
4.这里还要对前面两个热区的交互做出修改，当点击热区更换股票的时候，详细信息要回到state1。设置如图：
另外，还要将白色的圆形按钮还原到第一个位置，坐标（170，400+296+13）。如图：
5.同法添加dpDetail的OnSwipe Right事件，通过复制粘贴再修改也行。
最后交互的结果如图：
