# 食谱项目总结

食谱项目总结

1、需求

1、创建食谱，交互为很长的一页布局，上面部分为基本信息，下面部分为创建食谱步骤，可以新增删除，最下面是提交。 考虑用户体验和一些意外的发生（比如用户编辑步骤非常多，页面会很长，而且如果最后某一接口错误或bug，整篇编辑将会白费）， 为了解决这个问题，我提出，通过tab分成两栏布局，第一栏为基本信息，第二栏为创建步骤，每个步骤分步保存， 带来的好处有两个，一个是新增、编辑内容时不会导致页面拉的太长。第二个是分步保存，不会造成一次提交出错导致全部内容保存失败。

带来的挑战，比如，由于基本信息中有选择设备品类，会影响步骤中的一些选择条件。当用户编辑和新增基本信息的时候，必须保存之后才能，继续编辑步骤。所以采用的方案是，当新增基本信息或者编辑基本信息改动时，需要第二个tab禁用。并做一个先保存基本信息的提醒，当保存后放开。开始用的父子组件传值，不是很优雅，后来选择使用redux方案，做这种状态的共享。为了更好的提高用户体验，点击保存基本信息后，滑动到页面顶端。编写了一个scrollAnimation的公共函数

为了控制滑动速度和页面帧的平滑切换使用了h5中新增得window.requestAnimationFrame结合window.scrollTo