每日优鲜app静态页面

1：header.left中，.arrow的div的大小是多少？为何后面跟着的.city是relative?

在自己凭记忆编码中，arrow和city的位置不对，通过调试得知，既然我已经将arrow设置为absolute，那么在给bottom的时候就应该为0，而不是21。如此解决了arrow位置不对的问题。那么对于city呢？我记忆中老师是用relative的啊而且记忆中width是100%！反正调试出来的结果很奇怪。

 

arrow的解决方法有问题，位置不对的原因是我将div的高设置为了50，应该设置为16/2=8,这样将bottom设置为21就可以了，结果出来的效果和将bottom设置为0，高度为50的效果一样。

city的解决方法，如何解决用了relative和100%的width,还有padding.但是city的框不会超出left的框呢？方法就是利用box-sizing:border-box；这样无论padding多大，最后都会在city的边框中显示，不会撑大city的大小。

 

2：我想取到nav内部元素个数的值，但是nav的全局属性里面没有相关的信息。所以我无法想document.GetElementById.style.height一样来取到相应的值。导致我无法确定menu的个数。

@@@https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelectorAll@@用querySelectorAll()返回nav内部元素列表@

HTMLElement.offsetHeight＃＃＃https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetHeight

3:用api.closeWin();就可以通过关闭win来实现返回；

 

以上，总结一下今天所学

开发ａｐｐ，在功能需求出来之后，首先要做屏幕适配，这一步需要三步，首先确定viewpoint，然后确定ＵＩ尺寸，从而确定倍率。这样就适配好了，然后在下面的呃开发中，从ｐｓ中量的的数据都要除以倍率应用到静态页面的编写中。

确定适配之后，删除index页面所有元素，然后使用ａｐｉ．ｏｐｅｎｗｉｎ来打开ｍａｉｎ．ｈｔｍｌ．

然后在ｍａｉｎ中编写静态页面；第一步用语义化标签确定元素ｄｏｍ。然后遵循display，position，width，height，box-sizinｇ的顺序确定这些元素的样式。同时注意利用弹性响应式布局和流动布局来布局。遵循这样的规则就可以编写静态界面了。

所有静态页面编写完成之后，然后就可以加入界面ｆｒａｍｅ整合。这里第一个问题就是界面的定位。需要用到ａｐｉ．ｏｆｆｓｅｔ．ｈ取出对应元素的高度。同时这里有一个沉浸式效果需要用到ａｐｉ．ｆｉｘＳｔａｔｕｓＢａｒ。

在界面定位好之后，下面就是ｆｒａｍｅ的切换了．效果就是通过滑动或者点击实现界面的切换。这里面遇到的第一个问题就是取出列表中的元素个数的值。需要用到ａｐｉ．ｄｏｍＡｌｌ．取出之后，就是判断通过点击得出的当前ｆｒａｍｅ的值是否等于实际值，如果不是，改换当前ｆｒａｍｅ的ｃｓｓ。从而实现滑动或者点击变化frame的效果。

然后就是利用ｔａｐｍｏｄｅ来解决ｏｎｃｌｉｃｋ的３００ｍｓ延时效果。

延时解决之后，就是跳转window的效果。通过点击，设置ａｐｉ．ｏｐｅｎｗｉｎ然后在那里面首先写ｗｉｎｄｏｗ，然后加入ｆｒａｍｅ，也要先定位，然后如果有ｆｒａｍｅ就要进行组切换，如果没有，就设置api.closewin来关闭该window。这样就自然回到ｍａｉｎ页面了。

这样，window和ｆｒａｍｅ页切换就完成了，然后要解决ｉｎｄｅｘ页面白屏的问题。那么就要在ｍａｉｎ页面最开始监听ａｐｐｂａｃｋ事件。要利用到fnInitEventListenner。自动识别时可以直接写ａｐｉｂａｃｋ．

至此，第二课第二节完毕。

有一个ｆｒａｍｅ数据返回遗漏。那就是ａｐｉ．ｐａｇｅｐａｒａｍ．这个返回是ｗｉｎ与ｗｉｎ，ｆｒａｍｅ与ｆｒａｍｅ的数据返回。对应的有ｗｇｔｐａｒａｍ和ａｐｐｐａｒａｍ．

 

转载于:https://www.cnblogs.com/JingWeiBird/p/8593721.html