Axure学习笔记:淘宝扫描码历史记录界面
2018-01-16 本文已影响8人
篱落LY
![](https://img.haomeiwen.com/i2758738/e14225aa7a49ad93.png)
![](https://img.haomeiwen.com/i2758738/f048e12c380447c3.png)
步骤:
1. 绘制界面的背景矩形、顶部状态栏、标题栏
![](https://img.haomeiwen.com/i2758738/f3fb07394e2b8286.png)
2. 添加界面中表格通用的cell格式
![](https://img.haomeiwen.com/i2758738/12c64efb2fd094cd.png)
3. 添加cell的图标
![](https://img.haomeiwen.com/i2758738/d48d3a06eac86685.png)
4. 添加tableView中其他的cell,发现最底部的cell超出了界面的屏幕高度,这时候添加一个动态面板,动态面板高度=整个界面的高度-顶部状态栏高度-标题栏高度,动态面板宽度=界面宽度
![](https://img.haomeiwen.com/i2758738/4c7d97fea7de1e11.png)
5. 修改每个cell中的内容
![](https://img.haomeiwen.com/i2758738/f5e1d16d028e35ce.png)
6. 全选所有的cell,剪切到动态面板里面
![](https://img.haomeiwen.com/i2758738/76b52dbbc8beecc8.png)
7. 动态面板里面的内容
![](https://img.haomeiwen.com/i2758738/631e4754f9dd36e3.png)
8. 返回界面中看到的效果,底部的cell会被遮挡,不会超出界面的高度。可以在动态面板添加手势操作~~可以上下滑动显示面板内的所有内容
![](https://img.haomeiwen.com/i2758738/335747dc22d74501.png)
9. 效果图
![](https://img.haomeiwen.com/i2758738/1627d613240f410a.png)
10. copy上面的成品图
![](https://img.haomeiwen.com/i2758738/cf544ce7a83cd061.png)
11. 绘制遮罩矩形图层
![](https://img.haomeiwen.com/i2758738/ec3b6fe179a926ec.png)
12. 绘制提示框
![](https://img.haomeiwen.com/i2758738/ea52303feca95db9.png)
13. 添加提示框文字
![](https://img.haomeiwen.com/i2758738/a7b7cb0edbae408b.png)
14. 完成~~
![](https://img.haomeiwen.com/i2758738/1131a63f0e3b044f.png)
素材:
1. 图标
![](https://img.haomeiwen.com/i2758738/a539bcdc42ebcc92.png)