记录做app页面全过程与中途出现的错误

       前言：和以往不同的是今天需要绘制app手机端的页面，没绘画过app端页面的我，本抱着需要一定时间才可将任务完成。谁成想，手机端相比pc绘制页面更需要技巧。如果说单一去写app端，想着会设置很多，而这时,前端框架占据了极大的优势。在这个app当中则是使用到了uView前端框架，在这个框架中有很多突出的页面样式，其中对于form表单中常用的该框架中都有直接的案例。

        回到项目当中：

        和以往不同的是在这个app页面用了template模板，在template内部其中用view代替了最外层div，为保持页面放在各类手机整体不变形（块浮动）所以在最外层设置class属性中设置了width、padding和box-sizing，其中需重点看一下box-sizing，app页面中box-sizing用的是border-box属性（border-box就是将border和padding数值包含在width和height之内，这样的好处就是修改border和padding数值盒子的大小不变），解决了布局，随后对于页面大体内容，基本都可参考UView（乌惟尤）

        当然有句话说的好，人从泥中过，哪有不沾鞋。这不，好巧不巧，本想能很快结束。但偏偏在遍历照片（即多张照片进行v-for循环）中出现了页面布局错误（通过img遍历照片，虽可以得到多张照片，但在显示上，页面可见宽度的内容，照片还好好的，但往后，照片超出页面宽度后，完全不显示，可见页面有一张还出现了一半可见一半不可见的悬疑感），之后给它外层宽度给定100%，它照片虽然全部显示了，但是这些都是在一行并且照片的宽度成了自定义，虽勉强可以，但那一行要是成千上万张，到时岂不每一张照片宽度都接近0而不等于零。最后硬是来了一手三顾茅庐其对象为——度娘，作为白嫖用户，对此只能说，有你真好。最后，直接用了一两个小时来思考这个问题。谁成本想抱着试试的角度来改，到最后就一个标签就解决了，给我无语的呀。这个解决就是在页面那一行没有自动换行的标签外添加一个div标签，真的简单又实用。这个问题解决之后有蹦出了一个错误，就是对于UView中使用text-align不知是使用上有问题还是别的，它出现了无效状态，字体都不能居中，不论css样式放在那都无变化，原因是text-align只是让文字元素居中，margin：auto是让整个边框加文字居中